/* number of images*/
.gallery {
    --s: 280px;
    /* control the size */
    --d: 20s;
    /* animation duration */
    display: grid;
    width: var(--s);
    aspect-ratio: 1;
    overflow: hidden;
    padding: calc(var(--s)/20);
    border-radius: 50%;
    position: relative;
    clip-path: circle(49.5%);
    /* to avoid a few glitch caused by overflow: hidden */
  }
  
  .gallery::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: inherit;
    border-radius: inherit;
    background: repeating-conic-gradient(#1A5D3C 0 30deg, #e69500 0 60deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
  
  .gallery > img {
    grid-area: 1/1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    transform-origin: 50% 196.1902200082%;
  }
  
  .gallery::after,
  .gallery > img {
    animation: m var(--d) infinite cubic-bezier(0.5, -0.2, 0.5, 1.2);
  }
  
  .gallery > img:nth-child(2) {
    animation-delay: calc(-0.1111111111*var(--d));
  }
  
  .gallery > img:nth-child(3) {
    animation-delay: calc(-0.2222222222*var(--d));
  }
  
  .gallery > img:nth-child(4) {
    animation-delay: calc(-0.3333333333*var(--d));
  }
  
  .gallery > img:nth-child(5) {
    animation-delay: calc(-0.4444444444*var(--d));
  }
  
  .gallery > img:nth-child(6) {
    animation-delay: calc(-0.5555555556*var(--d));
  }
  
  .gallery > img:nth-child(7) {
    animation-delay: calc(-0.6666666667*var(--d));
  }
  
  .gallery > img:nth-child(8) {
    animation-delay: calc(-0.7777777778*var(--d));
  }
  
  .gallery > img:nth-child(9) {
    animation-delay: calc(-0.8888888889*var(--d));
  }
  
  @keyframes m {
    0%, 3% {
      transform: rotate(0);
    }
    9.1111111111%, 14.1111111111% {
      transform: rotate(-40deg);
    }
    20.2222222222%, 25.2222222222% {
      transform: rotate(-80deg);
    }
    31.3333333333%, 36.3333333333% {
      transform: rotate(-120deg);
    }
    42.4444444444%, 47.4444444444% {
      transform: rotate(-160deg);
    }
    53.5555555556%, 58.5555555556% {
      transform: rotate(-200deg);
    }
    64.6666666667%, 69.6666666667% {
      transform: rotate(-240deg);
    }
    75.7777777778%, 80.7777777778% {
      transform: rotate(-280deg);
    }
    86.8888888889%, 91.8888888889% {
      transform: rotate(-320deg);
    }
    98%, 100% {
      transform: rotate(-360deg);
    }
  }
  /* body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-content: center;
    background: #C2CBCE;
  } */