.parallax-grid {
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem;
  width:100%;
  height:100%;
}

.grid {
  --translate: -4vh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20vw 1.5rem;
  padding: 1.5rem;
  margin-top: -13rem;
}

.grid .spacer {
  grid-column: span 2;
}

.grid[data-style=clipped] .img {
  view-timeline: --tl;
  overflow: hidden;
}

.grid[data-style=clipped] .img:nth-of-type(3n + 5) {
  --translate: 10%;
}

.grid[data-style=clipped] .img:nth-of-type(7n + 2) {
  --translate: 5%;
}

.grid[data-style=clipped] .img:nth-of-type(3n + 5) {
  --translate: -10%;
}

.grid[data-style=clipped] .img img {
  --translate: -10%;
  width: 120%;
  margin: -10% -10%;
}

@media (prefers-reduced-motion: no-preference) {
  .grid[data-style=clipped] .img img {
    animation-timeline: --tl;
    animation-range: cover 30%;
    animation-name: parallax;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .grid[data-style=scaled] .img {
    scale: 0.5;
    animation-name: scale-parallax;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .grid[data-style=crazy] .img {
    filter: blur(20px);
    scale: 0;
    animation-name: crazy-parallax;
  }
}

.grid[data-style=crazy] .img:nth-of-type(3n) {
  animation-range: cover 5%;
}

.grid[data-style=crazy] .img:nth-of-type(3n + 2) {
  animation-range: cover 15%;
}

.grid .img {
  grid-column: span 3;
}

@media (prefers-reduced-motion: no-preference) {
  .grid .img {
    animation-timeline: view();
    animation-range: cover;
    animation-name: parallax;
  }
}

.grid .img:nth-of-type(2n) {
  margin-top: 4vw;
}

.grid .img:nth-of-type(8n + 3) {
  grid-column: span 4;
  --translate: -10vh;
}

.grid .img:nth-of-type(5n + 3) {
  grid-column: span 5;
  --translate: -15vh;
}

.grid .img:nth-of-type(5n + 7) {
  grid-column: span 2;
  --translate: 15vh;
}

.grid .img img {
  display: block;
  width: 100%;
  object-fit: cover;
}

@keyframes parallax {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(var(--translate));
  }
}

@keyframes scale-parallax {
  0% {
    scale: 0.5;
    transform: translateY(0);
  }

  30%,
  70% {
    scale: 1;
  }

  100% {
    scale: 0.5;
    transform: translateY(calc(var(--translate) * 1.5));
  }
}

@keyframes clipped-parallax {
  0% {
    scale: 0.5;
    transform: translateY(0);
  }

  30%,
  70% {
    scale: 1;
  }

  100% {
    scale: 0.5;
    transform: translateY(var(--translate));
  }
}

@keyframes crazy-parallax {
  0% {
    scale: 0;
    filter: blur(20px);
  }

  40%,
  60% {
    filter: blur(0);
    scale: 1;
  }

  100% {
    scale: 0;
    transform: translateY(var(--translate));
    filter: blur(20px);
  }
}

.grid>.img {
  z-index: 1200 !important;
  margin-left: 2rem !important;
}

.grid>.atras {
  z-index: 100 !important;
  width: 100% !important;
}

.huge-title {
  color: white !important;
  font-size: 2.8vw;
  text-align: justify;
}

.bajar {
  margin-top: -5rem;
}