.gallery {
  --d: 15s;
  display: grid;
  width: 50vw;
}

.gallery > img {
  grid-area: 1/1;
  width: 65vw;
  aspect-ratio: 1;
  object-fit: cover;
  position: relative;
  right: -12%; 
  z-index: 2;
  animation: slide var(--d) infinite, z-order var(--d) infinite steps(1);
}

.gallery img:last-child {
  animation-name: slide, z-order-last;
}

/* Reemplazo del bucle @for — ahora con 10 imágenes */
.gallery > img:nth-child(1)  { animation-delay: calc((1 - 1)/10 * var(--d));  --r: -1deg; }
.gallery > img:nth-child(2)  { animation-delay: calc((1 - 2)/10 * var(--d)); --r: -2deg; }
.gallery > img:nth-child(3)  { animation-delay: calc((1 - 3)/10 * var(--d));  --r: -3deg;}
.gallery > img:nth-child(4)  { animation-delay: calc((1 - 4)/10 * var(--d)); --r: -4deg;}
.gallery > img:nth-child(5)  { animation-delay: calc((1 - 5)/10 * var(--d));  --r: -5deg;}
.gallery > img:nth-child(6)  { animation-delay: calc((1 - 6)/10 * var(--d));  --r: 1deg;}
.gallery > img:nth-child(7)  { animation-delay: calc((1 - 7)/10 * var(--d)); --r: 2deg;}
.gallery > img:nth-child(8)  { animation-delay: calc((1 - 8)/10 * var(--d));  --r: 3deg;}
.gallery > img:nth-child(9)  { animation-delay: calc((1 - 9)/10 * var(--d));  --r: 4deg;}
.gallery > img:nth-child(10) { animation-delay: calc((1 - 10)/10 * var(--d)); --r: 5deg; }

@keyframes slide {
  0%, 100%, 20% { transform: translateX(0%) rotate(var(--r)); }
  10% { transform: translateX(120%) rotate(var(--r)); }
}

@keyframes z-order {
  10%, 20% { z-index: 1; }
  80% { z-index: 2; }
}

@keyframes z-order-last {
  10%, 20% { z-index: 1; }
  90% { z-index: 2; }
}