.image-carousel-3d{overflow:hidden;position:relative;width:100%}.image-carousel-3d__scene{display:grid;margin-left:calc(50% - 50vw);perspective:64em;place-items:center;position:relative;width:100vw}.image-carousel-3d__scene--fade{-webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}.image-carousel-3d__ring{animation:image-carousel-3d-spin var(--speed,60s) linear infinite;display:grid;place-items:center;position:relative;transform-style:preserve-3d}.image-carousel-3d__scene--pausable:hover .image-carousel-3d__ring{animation-play-state:paused}@keyframes image-carousel-3d-spin{to{transform:rotateY(-1turn)}}.image-carousel-3d__card{--ba:calc(1turn/var(--n));aspect-ratio:var(--aspect,7/10);backface-visibility:hidden;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius,10px);grid-area:1/1;object-fit:cover;transform:rotateY(calc(var(--i)*var(--ba))) translateZ(calc((var(--w, 13.5em)*0.5*-1 + -.55em)/tan(.5 * var(--ba))));width:var(--w,13.5em)}.image-carousel-3d__card--grayscale{filter:grayscale(1) contrast(1.05) brightness(.82);transition:filter .4s ease}.image-carousel-3d__scene:hover .image-carousel-3d__card--grayscale{filter:grayscale(0) contrast(1) brightness(1)}@media (max-width:640px){.image-carousel-3d__card{--w:9em}.image-carousel-3d__scene{perspective:44em}}@media (prefers-reduced-motion:reduce){.image-carousel-3d__ring{animation-duration:200s}}