.operations {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--green);
}

.operations-backdrop {
  position: absolute;
  inset: -7%;
  z-index: -1;
  overflow: hidden;
  perspective: 1200px;
  background: var(--green);
}

.operations-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 49, 42, .95) 0%, rgba(3, 49, 42, .87) 42%, rgba(3, 49, 42, .72) 100%),
    linear-gradient(180deg, rgba(7, 61, 53, .18), rgba(7, 61, 53, .48));
  pointer-events: none;
}

.operations-backdrop img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  opacity: .76;
  filter: saturate(.9) contrast(1.04);
  transform: scale(1.06);
  transform-origin: 68% 50%;
}

.operations > :not(.operations-backdrop) {
  position: relative;
  z-index: 1;
}

.operations .section-heading {
  text-shadow: 0 5px 28px rgba(0, 0, 0, .22);
}

.operations .operation-card {
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: 0 28px 70px rgba(0, 20, 17, .30);
}

@media (prefers-reduced-motion: no-preference) {
  .operations-backdrop.operations-will-animate img {
    opacity: .42;
    filter: saturate(.72) contrast(1.04) blur(5px);
    transform: translate3d(0, 38px, -40px) rotateX(1.7deg) scale(1.15);
    transition:
      opacity .85s ease,
      filter 1s ease,
      transform 1.2s cubic-bezier(.22, .8, .25, 1);
  }

  .operations-backdrop.operations-will-animate.is-in-view img {
    opacity: .76;
    filter: saturate(.9) contrast(1.04) blur(0);
    transform: translate3d(0, 0, 0) rotateX(0) scale(1.06);
  }
}

@media (max-width: 700px) {
  .operations-backdrop img {
    object-position: 70% center;
    transform-origin: 76% 50%;
  }

  .operations-backdrop::after {
    background:
      linear-gradient(180deg, rgba(3, 49, 42, .94) 0%, rgba(3, 49, 42, .82) 50%, rgba(3, 49, 42, .76) 100%),
      linear-gradient(90deg, rgba(7, 61, 53, .30), rgba(7, 61, 53, .56));
  }
}