<div class="grid">
  <img src="//fillmurray.com/400/300"/>
  <img src="//fillmurray.com/400/300"/>
  <img src="//fillmurray.com/400/300"/>
</div>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, blanditiis rem. Quia, earum nostrum. Accusantium non quod dicta reiciendis, quibusdam fugit ducimus modi error sed delectus, accusamus, id odit explicabo!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, blanditiis rem. Quia, earum nostrum. Accusantium non quod dicta reiciendis, quibusdam fugit ducimus modi error sed delectus, accusamus, id odit explicabo!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, blanditiis rem. Quia, earum nostrum. Accusantium non quod dicta reiciendis, quibusdam fugit ducimus modi error sed delectus, accusamus, id odit explicabo!</p>

<img src="//fillmurray.com/600/300"/>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, blanditiis rem. Quia, earum nostrum. Accusantium non quod dicta reiciendis, quibusdam fugit ducimus modi error sed delectus, accusamus, id odit explicabo!</p>

<img src="//fillmurray.com/600/300"/>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, blanditiis rem. Quia, earum nostrum. Accusantium non quod dicta reiciendis, quibusdam fugit ducimus modi error sed delectus, accusamus, id odit explicabo!</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, blanditiis rem. Quia, earum nostrum. Accusantium non quod dicta reiciendis, quibusdam fugit ducimus modi error sed delectus, accusamus, id odit explicabo!</p>

body {
  padding: 10em 2em;
}

img {
  max-width: 100%;
  height: auto;
}

// Desktop-only effect!
@media (min-width: 40em) {
  .grid {
    // Multiplier for multiple items!
    --multiplier: 0;

    // Layout    
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 2em;
    margin-bottom: 12em;

    // Parallax images
    img {
      opacity: calc( 1 - calc(var(--scroll-amount) * 0.002));
      transform: translateY(calc(var(--scroll-amount) * var(--multiplier) * 1px ));
      will-change: transform;

      @media (prefers-reduced-motion) {
        transform: none;
      }
    }

    // SPEED BOOST
    img:nth-of-type(1) {
      --multiplier: 0.1;
    }

    img:nth-of-type(2) {
      --multiplier: 0.2;
    }

    img:nth-of-type(3) {
      --multiplier: 0.3;
    }
  }
}

// Set the variable to the scroll distance
window.addEventListener('scroll', function() {
  document.body.style.setProperty("--scroll-amount", (document.body.scrollTop || document.documentElement.scrollTop) );
});