@layer reset, tokens, base, components, responsive, utilities;

@layer responsive {
  @media (max-width: 639.98px) {
    :root {
      --hero-gap: var(--space-5);
      --hero-dots-h: 44px;
    }

    .hero {
      height: clamp(340px, 58vh, 540px);
      height: clamp(340px, 58svh, 540px);
      touch-action: pan-y;
    }

    .hero__slide {
      visibility: hidden;
      transition: opacity var(--motion-screen) var(--ease-standard), visibility 0s linear var(--motion-screen);
    }

    .hero__slide.is-active {
      visibility: visible;
      transition: opacity var(--motion-screen) var(--ease-standard), visibility 0s linear 0s;
    }

    .hero__art-img {
      pointer-events: none;
      -webkit-user-drag: none;
    }

    .hero__scrim {
      background-image:
        linear-gradient(
          to top,
          rgb(var(--rgb-canvas-deep) / 0.86) 0%,
          rgb(var(--rgb-canvas-deep) / 0.66) 14%,
          rgb(var(--rgb-canvas-deep) / 0.4) 28%,
          rgb(var(--rgb-canvas-deep) / 0.16) 42%,
          rgb(var(--rgb-canvas-deep) / 0) 58%
        ),
        linear-gradient(
          to right,
          rgb(var(--rgb-canvas-deep) / 0.34) 0%,
          rgb(var(--rgb-canvas-deep) / 0.1) 38%,
          rgb(var(--rgb-canvas-deep) / 0) 64%
        );
    }

    .hero__content {
      gap: var(--space-2);
      padding: 0 var(--hero-pad) var(--hero-dots-h);
    }

    .hero__eyebrow {
      gap: var(--space-2);
      font-size: var(--fs-badge);
      letter-spacing: 0.14em;
    }

    .hero__eyebrow::before {
      width: var(--space-3);
    }

    .hero__title {
      font-size: clamp(1.625rem, 7.2vw, 1.875rem);
    }

    .hero__description {
      max-width: 38ch;
      font-size: 0.9375rem;
      line-height: 1.4;
    }

    .hero__nav {
      display: none;
    }

    .hero__controls {
      top: auto;
      right: auto;
      bottom: 0;
      left: var(--hero-pad);
      height: var(--hero-dots-h);
    }

    .hero__indicator {
      place-items: center start;
    }
  }
}