.parallax {
  position: relative;
  overflow: hidden; }

.parallax-layer {
  --height: 100%;
  --dy: 0px;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }
  .parallax-layer.parallax-bg {
    top: 0;
    bottom: 0;
    background-position: 50% calc(50% + var(--dy, 0px ));
    background-size: auto var(--height, 100%); }
  .parallax-layer.parallax-3d {
    top: 50%;
    transform: translate3d(0, calc(-50% + var(--dy, 0px )), 0);
    height: var(--height, 100%);
    background-position: center;
    background-size: cover;
    will-change: transform; }
  .parallax-layer.parallax-y {
    top: 50%;
    transform: translateY(calc(-50% + var(--dy, 0px )));
    height: var(--height, 100%);
    background-position: center;
    background-size: cover; }
  .parallax-layer.fixed {
    top: 0;
    bottom: 0;
    background-attachment: fixed;
    background-position: center;
    background-size: cover; }
  .parallax-layer.transparent {
    opacity: .5; }