.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--home-bg-image, none);
  background-size: var(--home-bg-size, cover);
  background-position: var(--home-bg-position, center);
  background-repeat: var(--home-bg-repeat, no-repeat);
  opacity: var(--home-bg-opacity, 0);
  pointer-events: none;
}

.hero .hero-glow {
  z-index: 1;
}

.hero .hero-grid {
  position: relative;
  z-index: 2;
}

@media (max-width: 760px) {
  .hero::before {
    background-image: var(--mobile-home-bg-image, var(--home-bg-image, none));
    background-size: var(--mobile-home-bg-size, var(--home-bg-size, cover));
    background-position: var(--mobile-home-bg-position, var(--home-bg-position, center));
    background-repeat: var(--mobile-home-bg-repeat, var(--home-bg-repeat, no-repeat));
    opacity: var(--mobile-home-bg-opacity, var(--home-bg-opacity, 0));
  }
}