.header .parallax {

  animation: parallax1 1s linear infinite;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -1s);

  animation-iteration-count: 1;
  animation-fill-mode: both;
}

.header .container {

  animation: parallax2 1s linear infinite;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -1s);

  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@keyframes parallax1 {
  to {
    transform: translateY(200px);
  }
}
@keyframes parallax2 {
  to {
    transform: translateY(100px);
  }
}