.parallax,
.parallax2 {
  display: grid;
  grid-template-areas: "stack";
  position: relative;
  z-index: 0;
}

.parallax > * {
  grid-area: stack;
  animation: parallax linear;
  animation-timeline: scroll();
  animation-range: 0vh 100vh;
}
.parallax2 > * {
  grid-area: stack;
  animation: parallax linear;
  animation-timeline: view();
  animation-range: 30vh 240vh;
}

.parallax-shadow {
  --parallax-speed: 0;
}

.parallax-img {
  --parallax-speed: 2;
}

.parallax-text {
  --parallax-speed: 2.5;
}

.parallax-img2 {
  --parallax-speed: 2;
}

.parallax-text2 {
  --parallax-speed: 0.7;
}

@keyframes parallax {
  to {
    transform: translateY(calc(var(--parallax-speed) * 200px));
  }
}