.hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.78fr); column-gap:clamp(2rem,5vw,5rem); align-items:center; }
.hero-copy { min-width:0; }
.hero-scene { position:relative; width:min(100%,26.5rem); min-width:0; justify-self:end; }
.hero-scene picture { display:block; }
.hero-scene img { display:block; width:100%; height:auto; aspect-ratio:424/411; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(0 12px 16px rgb(17 25 48 / 10%)); }
.hero .discipline-track { grid-column:1/-1; }
.scene-toggle { position:absolute; z-index:1; top:.3rem; right:.3rem; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:1px solid var(--line); border-radius:.6rem; background:var(--white); color:var(--ink); box-shadow:0 3px 12px rgb(17 25 48 / 5%); }
.scene-toggle:hover { color:var(--blue); border-color:var(--blue); }
.scene-toggle svg { width:18px; height:18px; }
.hero-scene[data-playing='true'] .scene-play,.hero-scene[data-playing='false'] .scene-pause { display:none; }
@media screen and (max-width:900px) {
  .hero { grid-template-columns:minmax(0,1fr); }
  .hero-scene { width:min(100%,21rem); justify-self:center; margin-top:1.75rem; }
}
@media (forced-colors:active) { .scene-toggle { border-color:ButtonText; } }