/* Original AndréGround artwork stays behind the hero copy and motion layers. */
.hero {
  background-color: var(--deep);
  background-image:
    linear-gradient(90deg, rgba(2, 29, 36, .7) 0%, rgba(2, 29, 36, .35) 52%, rgba(2, 29, 36, .12) 100%),
    linear-gradient(180deg, rgba(2, 29, 36, .08) 0%, rgba(2, 29, 36, .16) 100%),
    url("assets/andreground-hero-glitch-v1--sha256-2893de7389f0.jpg");
  background-position: center, center, center;
  background-size: cover;
}

.hero-grid { opacity: .12; }

@media (max-width: 740px) {
  .hero {
    background-image:
      linear-gradient(180deg, rgba(2, 29, 36, .76) 0%, rgba(2, 29, 36, .58) 58%, rgba(2, 29, 36, .38) 100%),
      url("assets/andreground-hero-glitch-v1--sha256-2893de7389f0.jpg");
    background-position: center, 64% center;
  }

  .hero-grid { opacity: .08; }
}