.carousel-ring{display:grid;overflow:hidden;perspective:800px}@media screen and (min-width: 576px){.carousel-ring{perspective:1000px}}.carousel-ring{-webkit-mask:linear-gradient(90deg, rgba(0, 0, 0, 0), red 20% 80%, rgba(0, 0, 0, 0));mask:linear-gradient(90deg, rgba(0, 0, 0, 0), red 20% 80%, rgba(0, 0, 0, 0));cursor:grab;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;user-select:none}.carousel--grabbing{cursor:grabbing}.carousel-ring__ring{display:grid;place-self:center;transform-style:preserve-3d;transform:rotateY(var(--angle, 0deg));pointer-events:none}.carousel-ring__item{pointer-events:auto;--card-width: 40vw}@media screen and (min-width: 576px){.carousel-ring__item{--card-width: 50vw}}@media screen and (min-width: 990px){.carousel-ring__item{--card-width: 34vw}}@media screen and (min-width: 1600px){.carousel-ring__item{--card-width: 25vw}}.carousel-ring__item{--card-angle: 1turn/var(--cards-count);grid-area:1/1;width:var(--card-width);backface-visibility:hidden;transform:rotatey(calc(var(--card-index) * var(--card-angle))) translatez(calc(-1 * (0.5 * var(--card-width) + 0.5em) / tan(0.5 * var(--card-angle))))}