/* Keep the complete hero artwork separate from the heading at every width. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  grid-template-areas: "copy media";
  align-items: center;
  gap: clamp(24px, 3vw, 52px);
  min-height: clamp(480px, 66svh, 680px);
  padding-block: 48px 72px;
}
.hero::before {
  z-index: -1;
  background: radial-gradient(ellipse at 20% 65%, #203b342b, transparent 70%);
}
.hero-copy { grid-area: copy; width: 100%; max-width: 620px; min-width: 0; }
.hero-backdrop {
  grid-area: media;
  position: relative;
  inset: auto;
  z-index: 0;
  display: block;
  width: 100%;
  max-width: 660px;
  min-width: 0;
  aspect-ratio: 16 / 9;
  margin-top: 44px;
  justify-self: end;
  pointer-events: none;
}
.hero-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.hero h1 { font-size: clamp(40px, 4vw, 64px); }
@media (max-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "media" "copy";
    min-height: 0;
    gap: 20px;
    padding-block: 24px 40px;
  }
  .hero-backdrop { width: min(100%, 440px); margin: 0; justify-self: center; }
  .hero-copy { max-width: 640px; justify-self: center; }
  .hero h1 { font-size: clamp(36px, 6vw, 48px); }
  .hero-index { display: none; }
}
@media (max-width: 600px) {
  .hero { gap: 16px; padding-block: 18px 32px; }
  .hero-backdrop { width: min(100%, 360px); }
  .hero h1 { font-size: clamp(32px, 8vw, 44px); }
}