.hero__viewport{will-change:transform}@media (prefers-reduced-motion:reduce){.hero__viewport{transition:none!important}}
/* Anchor the caption above the dots; the desktop action must not add a row. */
.home-page .hero__content {
  padding-bottom: 48px;
}

.home-page .hero__button {
  position: absolute;
  right: 28px;
  bottom: 48px;
}

@media (max-width: 767px) {
  .home-page .hero {
    height: clamp(430px, 110vw, 460px);
    background: var(--bg);
  }

  .home-page .hero__image {
    position: absolute;
    inset: 0 0 auto;
    height: 72%;
  }

  .home-page .hero__shade {
    background: linear-gradient(180deg, transparent 25%, rgba(20, 20, 20, .35) 38%, rgba(20, 20, 20, .92) 52%, var(--bg) 72%);
  }

  .home-page .hero__content {
    width: 100%;
    padding: 0 16px 32px;
    gap: 8px;
  }

  .home-page .hero__title {
    width: 100%;
    max-width: none;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: none;
    animation: none;
    filter: none;
    font-size: 22px;
    font-weight: 700;
    line-height: 28px;
  }

  .home-page .hero__desc {
    width: 100%;
    max-width: none;
    color: #ddd;
    font-size: 14px;
    line-height: 21px;
    -webkit-line-clamp: 2;
  }

  .home-page .hero__score,
  .home-page .hero__score span,
  .home-page .hero__score strong {
    line-height: 20px;
  }

  .home-page .hero__content > .pill-row.hero-tags--mobile {
    width: 100%;
    max-width: none;
  }

  .home-page .hero__dots {
    right: 16px;
  }
}