.media-effect--fixed,
.media-effect--fixed-parallax.media-effect--active {
  position: fixed;
  clip-path: polygon(0 0, 100% 0, 100% 100.1%, 0 100.1%);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

:root {
  --parallax-offset: clamp(30px, 6vh, 180px);
}

.media-effect--parallax.media-effect--active,
.media-effect--fixed-parallax.media-effect--active {

  height: calc(100% + var(--parallax-offset, 3vh) * 2);
  margin-block: calc(-1 * var(--parallax-offset));
  transform: translateY(calc(0vh - var(--parallax-offset, 3vh) + (var(--scroll) * 2 * var(--parallax-offset, 3vh))));
}