/* Civil drawing: strongest beneath the video, fading into the heading. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 0 8%;
  background: url("assets/images/civil-plan-refined-v2.webp") center / contain no-repeat;
  filter: invert(1);
  opacity: .23;
  mask-image: linear-gradient(90deg, transparent 0%, #0004 19%, #000 52%),
    linear-gradient(180deg, transparent 0%, #000 24%, #000 83%, transparent 100%);
  mask-composite: intersect;
  pointer-events: none;
}

@media (max-width: 760px) {
  .hero::before {
    inset: 0;
    background-position: center 38%;
    opacity: .15;
    mask-image: linear-gradient(90deg, transparent, #000 55%),
      linear-gradient(180deg, transparent, #000 30%, #000 85%, transparent);
  }
}