.hero {
  position: relative;
  isolation: isolate;
}

.hero-background-video,
.hero-background-tint {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-background-video {
  z-index: 0;
  overflow: hidden;
  border: 1px solid rgba(81, 152, 255, .28);
  background: #06172c;
}

.hero-background-video-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-background-tint {
  z-index: 1;
  background: linear-gradient(90deg, rgba(3, 17, 35, .94) 0%, rgba(4, 22, 45, .86) 42%, rgba(4, 22, 45, .68) 100%);
}

.hero > .hero-noise,
.hero > .hero-sun,
.hero > .highway {
  z-index: 2;
}

.hero > .hero-grid {
  z-index: 3;
}

@media (max-width: 760px) {
  .hero-background-video-media {
    object-position: 58% center;
  }

  .hero-background-tint {
    background: linear-gradient(180deg, rgba(3, 17, 35, .88), rgba(4, 22, 45, .82));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-background-video {
    background: #06172c url("assets/hero/pebo-road-networks-poster.jpg") center / cover no-repeat;
  }

  .hero-background-video-media {
    visibility: hidden;
  }
}