.gallery {
  /*--s: 210px; control the size */
  --g: 10px; /*control the gap */
  /* display: grid; */
  margin: calc(var(--s) + var(--g));
}

.gallery > img {
  grid-area: 1/1;
  aspect-ratio: 0.866;
  object-fit: cover;
  clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0);
  transform: translate(var(--_x, 0), var(--_y, 0)) scale(var(--_t, 1));
  cursor: pointer;
  filter: grayscale(80%);
  transition: 0.2s linear;
}
.gallery > img:hover {
  filter: grayscale(0);
  z-index: 1;
  --_t: 1.2;
}

.gallery > img:nth-child(1) {
  --_x: calc(-100% - var(--g));
}
.gallery > img:nth-child(7) {
  --_x: calc(100% + var(--g));
}
.gallery > img:nth-child(3),
.gallery > img:nth-child(5) {
  --_y: calc(-75% - 0.87 * var(--g));
}
.gallery > img:nth-child(4),
.gallery > img:nth-child(6) {
  --_y: calc(75% + 0.87 * var(--g));
}
.gallery > img:nth-child(3),
.gallery > img:nth-child(4) {
  --_x: calc(-50% - 0.5 * var(--g));
}
.gallery > img:nth-child(5),
.gallery > img:nth-child(6) {
  --_x: calc(50% + 0.5 * var(--g));
}

/* body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-content: center;
    background: #aabbfb;
  } */

/* number of images*/
.gallery_slide {
  --d: 12s;
  /* duration */
  /* display: grid;
  width: 220px; */
}

.gallery_slide > img {
  grid-area: 1/1;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  /* border: 10px solid #f2f2f2; */
  /* box-shadow: 0 0 4px #0007; */
  z-index: 2;
  animation: slide var(--d) infinite, z-order var(--d) infinite steps(1);
}

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

.gallery_slide > img:nth-child(1) {
  animation-delay: calc(0 * var(--d));
  --r: 3deg;
}

.gallery_slide > img:nth-child(2) {
  animation-delay: calc(-0.1666666667 * var(--d));
  --r: 16deg;
}

.gallery_slide > img:nth-child(3) {
  animation-delay: calc(-0.3333333333 * var(--d));
  --r: -8deg;
}

.gallery_slide > img:nth-child(4) {
  animation-delay: calc(-0.5 * var(--d));
  --r: -16deg;
}

.gallery_slide > img:nth-child(5) {
  animation-delay: calc(-0.6666666667 * var(--d));
  --r: -16deg;
}

.gallery_slide > img:nth-child(6) {
  animation-delay: calc(-0.8333333333 * var(--d));
  --r: -12deg;
}

@keyframes slide {
  8.3333333333% {
    transform: translateX(120%) rotate(var(--r));
  }
  0%,
  100%,
  16.6666666667% {
    transform: translateX(0%) rotate(var(--r));
  }
}
@keyframes z-order {
  8.3333333333%,
  16.6666666667% {
    z-index: 1;
  }
  83.3333333333% {
    z-index: 2;
  }
}
@keyframes z-order-last {
  8.3333333333%,
  16.6666666667% {
    z-index: 1;
  }
  91.6666666667% {
    z-index: 2;
  }
}