@property --gallery-rotation {
    syntax: "<number>";
    initial-value: 0;
    inherits: true;
}
@keyframes gallery-rotation {
    to { --gallery-rotation: 1 } 
}
#gallery {
    --rotate-direction: 1;
    --rotate-duration: 40s;
    --item-size: 95%;
    --item-transition-duration: 0.5s; 
    width: min(55vmin, 500px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    display: grid;
    animation: gallery-rotation var(--rotate-duration) linear infinite;
    container-type: inline-size;
    isolation: isolate;
    margin: 20px auto;
}
#gallery img {
    box-sizing: border-box;
    grid-area: 1 / 1;
    width: calc(var(--item-size) / (1 + (1 / sin(180deg / var(--count)))));
    aspect-ratio: 1/1;
    box-shadow: 0 1cqw 2cqw rgba(0,0,0,0.2), 0 1.5cqw 2.5cqw rgba(0,0,0,0.1);
    border-radius: 50%;
    border: calc(5cqi / var(--count)) solid gold;
    object-fit: cover;
    offset-path: border-box;
    offset-anchor: top center;
    offset-distance: calc((100% * (var(--index) / var(--count) + var(--gallery-rotation, 0))) * var(--rotate-direction));
    transform: rotate(calc(-360deg * var(--rotate-direction) * (var(--index) / var(--count) + var(--gallery-rotation, 0))));
    z-index: 0;
    transition: width var(--item-transition-duration), filter var(--item-transition-duration), box-shadow var(--item-transition-duration), z-index 0s calc(var(--item-transition-duration) * var(--transition-delay-z, 1));
}            
#gallery img:hover {
    --transition-delay-z: 0;
    z-index: 1;
    width: 100%;
}
#gallery:has(img:hover) > img:not(:hover) {
    filter: grayscale(1);
    box-shadow: none;
}