.hero {
  height: auto;
  min-height: 0;
  aspect-ratio: 2048 / 682;
  background: #090d0a;
}

.hero-slides {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: #090d0a;
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  opacity: 0;
  transform: scale(1.008);
  transition: opacity .55s ease, transform 7s ease;
  pointer-events: none;
}

.hero-slide.active {
  opacity: 1;
  transform: scale(1);
}

@media (min-width: 781px) {
  .hero-shade,
  .hero::after { display: none; }

  .hero-kicker,
  .hero h1,
  .hero-copy,
  .hero-bracket { visibility: hidden; }

  .hero-actions .button {
    color: transparent;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    text-shadow: none;
    transform: none;
  }

  .hero-actions .button span { visibility: hidden; }
  .hero-actions .button:hover { background: rgba(255, 255, 255, .08); }
  .hero-actions .button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

  .hero-arrow {
    color: transparent;
    text-shadow: none;
  }

  .hero-arrow:hover { background: rgba(255, 255, 255, .08); }
  .hero-arrow:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
  .hero-dots button { opacity: 0; }
  .hero-dots button:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 4px; }
}

@media (max-width: 780px) {
  .hero {
    aspect-ratio: auto;
    background: #090d0a;
  }

  /* 320px tall keeps each whole product group inside a 375px-wide phone screen. */
  .hero-slides {
    height: 320px;
    bottom: auto;
  }

  .hero-slide {
    height: 320px;
    object-fit: cover;
    object-position: 74% center;
  }

  /* Centered on each photo's product group. */
  .hero-slide:nth-child(2) { object-position: 75% center; }
  .hero-slide:nth-child(3) { object-position: 80% center; }

  .hero-shade {
    display: block;
    background: linear-gradient(180deg, transparent 140px, rgba(9, 13, 10, .7) 250px, #090d0a 320px);
  }

  .hero-dots { bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; transform: none; }
}