@media (max-width: 980px) {
  .emotional-hero,
  .emotional-hero-copy {
    min-height: 760px;
  }

  .emotional-hero > img {
    object-position: 64% center;
  }

  .emotional-hero::after {
    background:
      linear-gradient(90deg, rgba(12, 13, 11, 0.85), rgba(12, 13, 11, 0.3) 72%),
      linear-gradient(0deg, rgba(12, 13, 11, 0.72), transparent 48%);
  }
}

@media (max-width: 720px) {
  .emotional-hero,
  .emotional-hero-copy {
    min-height: calc(100svh - 68px);
  }

  .emotional-hero > img {
    content: url('/assets/dirt-orbit-v2-hero-community-mobile-v1.webp');
    object-position: 63% center;
  }

  .emotional-hero::after {
    background: linear-gradient(0deg, rgba(12, 13, 11, 0.92) 0, rgba(12, 13, 11, 0.62) 48%, rgba(12, 13, 11, 0.12) 82%);
  }

  .emotional-hero-copy {
    justify-content: flex-end;
    padding: 80px 22px 86px;
  }

  .emotional-hero h1 {
    max-width: 620px;
    font-size: clamp(49px, 15vw, 76px);
    line-height: 0.84;
  }

  .emotional-hero-copy > p:not(.eyebrow) {
    margin-top: 20px;
    font-size: 18px;
  }

  .emotional-hero-copy > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
  }

  .hero-scroll {
    right: 22px;
    bottom: 20px;
    left: 22px;
    text-align: right;
  }

  .commercial-hero {
    min-height: 0;
  }

  .hero-copy h1 {
    font-size: clamp(51px, 15vw, 76px);
  }
}