*{box-sizing:border-box}body{display:grid;place-items:center;min-height:100vh;background:#000;font-family:ui-rounded,Hiragino Maru Gothic ProN,Quicksand,Comfortaa,Manjari,Arial Rounded MT,Arial Rounded MT Bold,Calibri,source-sans-pro,sans-serif}ul{width:90vw;height:100%;display:flex;list-style-type:none;padding:1rem 0;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;contain:inline-size;align-items:center}li{width:15%;aspect-ratio:1;background:red;display:grid;place-items:center;flex:1 0 15cqw;position:relative;height:15cqw;width:15cqw;view-timeline:--cover;view-timeline-axis:inline;transform-style:preserve-3d;perspective:100vmin;background:transparent}:root.z li{animation:z both linear;animation-timeline:--cover;animation-range:cover}li img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;background:#f5b1a3;-webkit-box-reflect:below 1vmin linear-gradient(transparent 0 50%,hsl(0 0% 100% / .75) 100%)}:root.rotation li img{animation:cover-flow both linear;animation-timeline:--cover;animation-range:cover}.image-wrapper{height:100%;width:100%;aspect-ratio:1;transform-origin:100% 50%;transform-style:preserve-3d;perspective:100vmin;position:absolute;top:50%;left:50%;translate:-50% -50%}:root.scaling .image-wrapper{animation:shrink both linear;animation-timeline:--cover;animation-range:cover}@keyframes shrink{0%{scale:.75;opacity:0;transform-origin:-150% 50%}5%{opacity:1}10%{opacity:1;scale:1;transform-origin:50% 50%}40%{scale:1;opacity:1;transform:translateZ(0)}50%{scale:1.2;opacity:1;transform:translateZ(15vmin)}60%{scale:1;opacity:1;transform:translateZ(0)}90%{opacity:1;transform-origin:50% 50%;scale:1}95%{opacity:1}to{scale:.75;opacity:0;transform-origin:250% 50%}}@keyframes z{0%,to{z-index:1}50%{z-index:100}}@keyframes cover-flow{0%{z-index:1;transform:translate(-80%) rotateY(-33deg)}20%{scale:1;transform:translate(0) rotateY(-33deg)}40%{transform:translate(15%) rotateY(-20deg)}50%{scale:1.2;transform:translate(0) rotateY(0)}60%{transform:translate(-15%) rotateY(20deg)}80%{scale:1;transform:translate(0) rotateY(33deg)}to{z-index:1;transform:translate(80%) rotateY(33deg)}}li:not([aria-hidden]){scroll-snap-align:center}div.tp-dfwv{position:fixed;z-index:9999}div.tp-dfwv .tp-rotv{max-height:calc(100vh - 16px);overflow:auto;border-radius:var(--bs-br)}div.tp-dfwv .tp-rotv>.tp-rotv_b{position:sticky;top:0;z-index:2;background:#45474c}