@property --slides{syntax:"<number>";inherits:true;initial-value:1}@property --slide-width{syntax:"*";inherits:true}@layer base{.carousel_container{--fade-enabled-override:initial}}@layer components{.carousel_container{--fade-distance:48px;--fade-start-enabled:0;--fade-end-enabled:1;--fade-enabled:min(var(--fade-enabled-override,1) * (var(--slides) - 1) * 100, 1);--fade-start-interval:calc(var(--fade-enabled) * var(--fade-start-enabled));--fade-end-interval:calc(var(--fade-enabled) * var(--fade-end-enabled))}}.carousel{-webkit-mask-image:linear-gradient(90deg, rgb(0 0 0/calc(1 - var(--fade-start-interval))) 0, #000 var(--fade-distance), #000 calc(100% - var(--fade-distance)), rgb(0 0 0/calc(1 - var(--fade-end-interval))) 100%);mask-image:linear-gradient(90deg, rgb(0 0 0/calc(1 - var(--fade-start-interval))) 0, #000 var(--fade-distance), #000 calc(100% - var(--fade-distance)), rgb(0 0 0/calc(1 - var(--fade-end-interval))) 100%);contain:paint}@media (width>=64rem){.carousel--game{--fade-distance:0px}}.carousel_slide{--calc-width:calc(100% / var(--slides) - (var(--gap) * (var(--slides) - 1) / var(--slides)));width:var(--slide-width,var(--calc-width))}@media (hover:hover){.carousel:has(.game-card-hover){margin-top:-1rem;padding-top:1rem}.carousel_slide:has(>.game-card-hover){overflow:visible}}