@layer components {
  .hero-image {
    --hero-overlay: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
    --hero-top-gradient: linear-gradient(0deg, rgba(0, 0, 0, 0) 70.87%, rgba(0, 0, 0, 0.8) 100%);
    --hero-bottom-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0) 65.99%, rgba(0, 0, 0, 0.8) 100%);

    background-image: var(--hero-bottom-gradient), var(--hero-url);
    background-size: cover;
    background-position: bottom;

    @media (min-width: 768px) {
      background-image: var(--hero-overlay), var(--hero-bottom-gradient), var(--hero-top-gradient), var(--hero-url);
    }
  }
}