.hero-depth-field {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.26;
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent 0 34%, #000 52% 100%);
}

.hero-depth-field[hidden] {
  display: none;
}

@media (max-width: 1023px) {
  .hero-depth-field {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-depth-field {
    opacity: 0.16;
  }
}