/* Carrousel de Imagenes */

.gallery  {
  --s: 280px; /* control the size */
  
  display: grid;
  width: var(--s);
  aspect-ratio: 1;
  overflow: hidden;
  /* Cambia el grosor del marco */
  /* padding: calc(var(--s)/20); */
  padding: calc(var(--s)/50);
  border-radius: 50%;
  position: relative;
  clip-path: circle(49.5%); /* to avoid a few glitch cause by overflow: hidden */
}

.gallery::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: inherit;
  border-radius: inherit;
  /* background: repeating-conic-gradient(#789048 0 30deg,#DFBA69 0 60deg); */
  background: repeating-conic-gradient(#e3e3e3 0 30deg,#e3e3e3 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% 120.7%;
}
.gallery::after,
.gallery > img {
  animation: m 40s infinite cubic-bezier(.5,-0.2,.5,1.2);
}
.gallery > img:nth-child(2) {animation-delay: -10s}
.gallery > img:nth-child(3) {animation-delay: -20s}
.gallery > img:nth-child(4) {animation-delay: -30s}



@keyframes m {
  /* 0%,3%    {transform: rotate(0)}
  22%,27%  {transform: rotate(-90deg)}
  47%,52%  {transform: rotate(-180deg)}
  72%,77%  {transform: rotate(-270deg)}
  98%,100% {transform: rotate(-360deg)} *//* Desbloquear esto para habilitar el carrousell */
  0%,100% {transform: rotate(0);}
}