@media (max-width: 700px) {
  .hero,
  .hero .eyebrow,
  .hero h1,
  .hero-copy > p:not(.eyebrow),
  .hero-caption {
    color: #fff;
  }

  .hero-shade {
    background:
      linear-gradient(
        90deg,
        rgba(24, 13, 6, 0.62) 0%,
        rgba(24, 13, 6, 0.38) 58%,
        rgba(24, 13, 6, 0.14) 100%
      ),
      linear-gradient(
        180deg,
        rgba(10, 6, 3, 0.18) 0%,
        rgba(10, 6, 3, 0.04) 58%,
        rgba(10, 6, 3, 0.18) 100%
      );
  }

  .hero h1,
  .hero-copy > p {
    text-shadow: 0 2px 22px rgba(15, 8, 3, 0.2);
  }

  .hero .button,
  .hero .button-light {
    color: #fff;
    background: rgba(21, 18, 15, 0.16);
    border-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(3px);
  }

  .hero .button:hover,
  .hero .button-light:hover,
  .hero .button:focus-visible {
    color: #15120f;
    background: #fff;
  }
}