:root{--index:calc(1vw + 1vh);--transition:cubic-bezier(.1,.7,0,1)}.items{perspective:calc(var(--index)*90);flex-wrap:wrap;gap:.8rem;display:flex}.item{cursor:pointer;filter:grayscale()brightness(.4);transition:transform 1.25s var(--transition),filter 3s var(--transition);will-change:transform,filter,rotateY;background-color:#222;background-position:50%;background-size:cover;border-radius:6%}.items .item:hover{filter:inherit;transform:translateZ(calc(var(--index)*10))}.items .item:hover+*{filter:inherit;transform:translateZ(calc(var(--index)*8.5))rotateY(35deg);z-index:-1}.items .item:hover+*+*{filter:inherit;transform:translateZ(calc(var(--index)*5.6))rotateY(40deg);z-index:-2}.items .item:hover+*+*+*{filter:inherit;transform:translateZ(calc(var(--index)*2.5))rotateY(30deg);z-index:-3}.items .item:hover+*+*+*+*{transform:translateZ(calc(var(--index)*.6))rotateY(15deg);z-index:-4}.items .item:has(+:hover){filter:inherit;transform:translateZ(calc(var(--index)*8.5))rotateY(-35deg)}.items .item:has(+*+:hover){filter:inherit;transform:translateZ(calc(var(--index)*5.6))rotateY(-40deg)}.items .item:has(+*+*+:hover){filter:inherit;transform:translateZ(calc(var(--index)*2.5))rotateY(-30deg)}.items .item:has(+*+*+*+:hover){transform:translateZ(calc(var(--index)*.6))rotateY(-15deg)}.item:before,.item:after{content:"";width:30px;height:100%;top:0;left:calc(var(--index)*-1);position:absolute}
.slider{width:100%;height:var(--height);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 10% 90%,#0000);mask-image:linear-gradient(90deg,#0000,#000 10% 90%,#0000)}.slider .list{width:100%;min-width:calc(var(--width)*var(--quantity));display:flex;position:relative}.slider .list .marquee-item{width:var(--width);height:var(--height);animation:15s linear infinite autoRun;animation-delay:calc((15s/var(--quantity))*var(--position) - 8s);transition:filter .5s;position:absolute;left:100%}@keyframes autoRun{0%{left:100%}to{left:calc(var(--width)*-1)}}.slider[reverse=true] .marquee-item{animation:10s linear infinite reversePlay}@keyframes reversePlay{0%{left:calc(var(--width)*-1)}to{left:100%}}.slider:hover .marquee-item{filter:grayscale();animation-play-state:paused!important}.slider .marquee-item:hover{filter:grayscale(0)}