.hero {
  background:
    linear-gradient(90deg, #050708f2 0%, #050708c4 43%, #05070842 78%, #05070824 100%),
    url('assets/shop-hero-sunset.webp') center 54% / cover fixed;
}

@media (max-width: 620px) {
  .hero {
    min-height: auto;
    padding-top: clamp(20rem, 66vw, 25rem);
    background:
      linear-gradient(to bottom, #05070808 0%, #05070824 24%, #050708e8 47%, #050708 62%),
      url('assets/shop-hero-sunset.webp') center top / 100% auto no-repeat;
    background-color: #050708;
  }

  .hero h1 {
    max-width: 100%;
    font-size: clamp(2.8rem, 12vw, 3.75rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero { background-attachment: scroll; }
}