.journey {
  --journey-progress: 0;
}

.sticky-art {
  opacity: .42;
}

.sticky-art::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: rgba(3, 23, 49, .16);
}

.sticky-art::after {
  z-index: 2;
  background: linear-gradient(90deg, #031731 0%, transparent 18%, transparent 82%, #031731 100%);
}

.sticky-art img {
  position: absolute;
  top: 0;
  height: 260vh;
  width: auto;
  max-width: none;
  transform: translate3d(0, calc(var(--journey-progress) * -160vh), 0);
  filter: saturate(.88);
  will-change: transform;
}

@media (max-width: 760px) {
  .sticky-art { opacity: .36; }
  .sticky-art::after { background: linear-gradient(90deg, #031731 0%, transparent 20%, transparent 80%, #031731 100%); }
  .sticky-art img { height: 230vh; transform: translate3d(0, calc(var(--journey-progress) * -130vh), 0); }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-art img { height: 100vh; transform: none; }
}