/* Shared pilot visual language for technical service heroes. */
.met-technical-visual {
  border-color: rgba(35, 214, 178, .24);
  background: #08100f;
  box-shadow:
    0 22px 55px rgba(0, 0, 0, .22),
    0 0 0 1px rgba(35, 214, 178, .055),
    0 0 34px rgba(35, 214, 178, .065);
}

.met-technical-visual picture {
  position: absolute;
  inset: 0;
  display: block;
}

.met-technical-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.met-low-current-visual img {
  object-position: 68% center;
}

.met-electric-visual img {
  object-position: 67% center;
}

.met-cctv-visual img {
  object-position: 54% center;
}

.met-fire-visual img {
  object-position: 48% center;
}

.met-network-visual img {
  object-position: 42% center;
}

.met-fiber-visual img {
  object-position: 42% center;
}

.met-access-visual img {
  object-position: 52% center;
}

.met-pa-visual img {
  object-position: 64% center;
}

.met-technical-visual::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background-image:
    linear-gradient(rgba(35, 214, 178, .042) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35, 214, 178, .042) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
  opacity: .4;
  pointer-events: none;
}

.met-technical-visual::after {
  z-index: 1;
  background:
    radial-gradient(circle at 76% 42%, rgba(35, 214, 178, .045), transparent 48%),
    linear-gradient(90deg, rgba(6, 11, 10, .34), rgba(5, 12, 11, .025) 48%, rgba(4, 10, 9, .08)),
    linear-gradient(180deg, rgba(5, 10, 9, .045), rgba(4, 9, 8, .3));
}

@media (max-width: 900px) {
  .met-low-current-visual img {
    object-position: 72% center;
  }

  .met-electric-visual img {
    object-position: 70% center;
  }

  .met-cctv-visual img {
    object-position: 54% center;
  }

  .met-fire-visual img {
    object-position: 45% center;
  }

  .met-network-visual img,
  .met-fiber-visual img {
    object-position: 35% center;
  }

  .met-access-visual img {
    object-position: 53% center;
  }

  .met-pa-visual img {
    object-position: 68% center;
  }
}

@media (max-width: 640px) {
  .met-technical-visual::before {
    background-size: 38px 38px, 38px 38px;
    opacity: .32;
  }
}