.gallery {
  --s: 280px;
  --d: 15s;
  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%);
  margin: 0 auto;
}

.gallery::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: inherit;
  border-radius: inherit;
  background: repeating-conic-gradient(#789048 0 30deg, #DFBA69 0 60deg);
  -webkit-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%;
  animation: m var(--d) infinite cubic-bezier(0.5, -0.2, 0.5, 1.2);
}

@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); }
}