@property --angle{syntax:"<angle>";initial-value:0deg;inherits:false}.shuffle-slider-wrapper{width:100%;max-width:50rem;margin:0 auto;display:flex;justify-content:center;align-items:center;min-height:450px}.cards{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;width:100%;aspect-ratio:16/9;max-width:40rem}.card,input[type=radio]{grid-column:1/-1;grid-row:1/-1}.card{--angle:0deg;--x:0px;--y:0px;transform:rotate(var(--angle)) translate(var(--x),var(--y));transition:transform .4s ease-out;z-index:var(--order)}.card-content{display:grid;grid-template-columns:2fr 3fr;gap:1.5rem;align-items:center;border-radius:var(--radius);background:hsl(var(--secondary)/.5);backdrop-filter:blur(10px);border:1px solid hsl(var(--border)/.2);box-shadow:0 8px 32px 0 hsl(var(--background)/.37)}.card-content,.card-image-wrapper{width:100%;height:100%;overflow:hidden}.card-image-wrapper{position:relative;border-radius:var(--radius) 0 0 var(--radius)}.card-image{width:100%;height:100%;object-fit:cover;transform-origin:center center;--angle:0deg;transform:rotate(var(--angle));transition:transform .4s ease-out}.card-text-content{padding:2rem 2rem 2rem 0;display:flex;flex-direction:column;justify-content:center;height:100%}.card-quote{font-style:italic;line-height:1.6;color:hsl(var(--foreground)/.8)}.card-author{margin-top:1.5rem;font-weight:600;color:hsl(var(--primary))}.card-author-role{font-size:.875rem;color:hsl(var(--accent))}.card-nav{margin-top:2rem;display:flex;gap:1rem}.card-nav-button{width:40px;height:40px;border-radius:50%;border:1px solid hsl(var(--border));background-color:transparent;color:hsl(var(--foreground)/.7);display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all .2s ease-in-out}.card-nav-button:hover{background-color:hsl(var(--accent));color:hsl(var(--accent-foreground));border-color:hsl(var(--accent))}:root:has(#slide-0:checked) .card:first-of-type,:root:has(#slide-1:checked) .card:nth-of-type(2),:root:has(#slide-2:checked) .card:nth-of-type(3),:root:has(#slide-3:checked) .card:nth-of-type(4),:root:has(#slide-4:checked) .card:nth-of-type(5),:root:has(#slide-5:checked) .card:nth-of-type(6){--angle:0deg;--x:0px;--y:0px}:root:has(#slide-0:checked) .card:nth-of-type(2),:root:has(#slide-1:checked) .card:nth-of-type(3),:root:has(#slide-2:checked) .card:nth-of-type(4),:root:has(#slide-3:checked) .card:nth-of-type(5),:root:has(#slide-4:checked) .card:nth-of-type(6),:root:has(#slide-5:checked) .card:first-of-type{--angle:12deg;--x:25%;--y:-12%}:root:has(#slide-0:checked) .card:nth-of-type(3),:root:has(#slide-1:checked) .card:nth-of-type(4),:root:has(#slide-2:checked) .card:nth-of-type(5),:root:has(#slide-3:checked) .card:nth-of-type(6),:root:has(#slide-4:checked) .card:first-of-type,:root:has(#slide-5:checked) .card:nth-of-type(2){--angle:8deg;--x:15%;--y:-8%}:root:has(#slide-0:checked) .card:nth-of-type(4),:root:has(#slide-1:checked) .card:nth-of-type(5),:root:has(#slide-2:checked) .card:nth-of-type(6),:root:has(#slide-3:checked) .card:first-of-type,:root:has(#slide-4:checked) .card:nth-of-type(2),:root:has(#slide-5:checked) .card:nth-of-type(3){--angle:4deg;--x:8%;--y:-4%}:root:has(#slide-0:checked) .card:nth-of-type(5),:root:has(#slide-1:checked) .card:nth-of-type(6),:root:has(#slide-2:checked) .card:first-of-type,:root:has(#slide-3:checked) .card:nth-of-type(2),:root:has(#slide-4:checked) .card:nth-of-type(3),:root:has(#slide-5:checked) .card:nth-of-type(4){--angle:-4deg;--x:-8%;--y:-2%}:root:has(#slide-0:checked) .card:nth-of-type(6),:root:has(#slide-1:checked) .card:first-of-type,:root:has(#slide-2:checked) .card:nth-of-type(2),:root:has(#slide-3:checked) .card:nth-of-type(3),:root:has(#slide-4:checked) .card:nth-of-type(4),:root:has(#slide-5:checked) .card:nth-of-type(5){--angle:-8deg;--x:-12%;--y:-4%}@media (max-width:768px){.cards{aspect-ratio:9/12;max-width:90vw}.card-content{grid-template-columns:1fr;grid-template-rows:1fr 1.5fr}.card-image-wrapper{border-radius:var(--radius) var(--radius) 0 0}.card-text-content{padding:1.5rem}:root:has(#slide-0:checked) .card:nth-of-type(2),:root:has(#slide-1:checked) .card:nth-of-type(3),:root:has(#slide-2:checked) .card:nth-of-type(4),:root:has(#slide-3:checked) .card:nth-of-type(5),:root:has(#slide-4:checked) .card:nth-of-type(6),:root:has(#slide-5:checked) .card:first-of-type{--angle:6deg;--x:8%;--y:-6%}}