body {
  background: #212121;
}

.image-gallery {
  padding-top: 10svh;
}

.item {
  display: grid;
  place-items: center;
  margin-bottom: 10svh;
  --filter: drop-shadow(0 0 10px #000);
  view-timeline-name: --img-timeline;
  animation: move-and-fade both;
  animation-timeline: view(y);
  animation-range: cover 0% cover 120%;
}

.item > img {
  width: 80svh;
  height: 80svh;
  aspect-ratio: 1/1;
  object-fit: cover;

  view-timeline-name: --img-timeline;
  animation-timeline: view(y);
  animation-range: cover 0% cover 120%;
}

@keyframes move-and-fade {
  from,
  to {
    filter: var(--filter) blur(100px) saturate(20);
  }

  45%,
  65% {
    filter: var(--filter) blur(0) saturate(1);
    transform: rotateY(0deg);
  }
}