*{margin:0;padding:0;box-sizing:border-box}:root{--theme-color: 150}html,body{max-height:100dvh;background-image:radial-gradient(circle,#80c7f8 35%,#5ab8f5,#26a9f1 51.25%,#00a1eb,#0098e0 59.38%,#0089c9 67.5%,#006a9d,#004d73);background-image:radial-gradient(circle,#80c7f8 35%,#5ab8f5,#26a9f1 51.25%,color(xyz 0.278 0.314 0.866),color(xyz 0.251 0.28 0.846) 59.38%,color(xyz 0.204 0.22 0.804) 67.5%,color(xyz 0.138 0.125 0.718),color(xyz 0.101 0.059 0.631))}body{display:flex;flex-direction:column;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;justify-content:center;align-items:center}.card-component{position:relative;height:35vh;width:100dvw;display:flex;justify-content:center;align-items:center;container-type:size;container-name:card-component}.card-component>*{--total-siblings: sibling-count();--index: sibling-index();--height: clamp(150px, 75cqh, 400px);aspect-ratio:auto 1 / 1.6;--cards-from-center: calc(var(--index) - (var(--total-siblings) + 1) / 2);--arc-spread: 40deg;--card-depth: 5%;--offset-angle: calc(var(--arc-spread) / var(--total-siblings));--arc-spread: 50deg;--angle: calc(var(--cards-from-center) * var(--offset-angle) + 270deg);--layer: calc(var(--total-siblings) - abs(var(--cards-from-center)));--radius-vertical: calc( 400px + (var(--height) - var(--scale-from-center-height)) );--radius-horizontal: 1000px;--scale-from-center-height: calc( var(--height) - abs(var(--cards-from-center)) * var(--card-depth) );top:calc(var(--radius-vertical) + var(--height) / 2);position:absolute;transform:translate(calc(cos(var(--angle)) * var(--radius-horizontal)),calc(sin(var(--angle)) * var(--radius-vertical))) rotate(calc(var(--angle) - 270deg));height:var(--scale-from-center-height);border-radius:15px;background-color:oklch(calc(var(--index) * 7% + 30%) .15 var(--theme-color));transition:transform .3s ease,z-index .3s;transition-behavior:allow-discrete;z-index:var(--layer)}.card-component>*:is(:hover,:focus){box-shadow:0 10px 10px #000c;transform:translate(calc(cos(var(--angle)) * var(--radius-horizontal)),calc(sin(var(--angle)) * var(--radius-vertical) - 80px)) scale(1.05) rotate(calc(var(--cards-from-center) * 3deg));cursor:pointer;z-index:100}.card-component>*:is(:hover,:focus)+*{transform:translate(calc(cos(var(--angle)) * var(--radius-horizontal) + 30px),calc(sin(var(--angle)) * var(--radius-vertical) - 20px)) rotate(calc(var(--angle) - 270deg - 3deg))}.card-component>*:is(:hover,:focus)+*+*{transform:translate(calc(cos(var(--angle)) * var(--radius-horizontal) + 30px),calc(sin(var(--angle)) * var(--radius-vertical))) rotate(calc(var(--angle) - 270deg - 1deg))}.card-component>*:has(+*:is(:hover,:focus)){transform:translate(calc(cos(var(--angle)) * var(--radius-horizontal) - 20px),calc(sin(var(--angle)) * var(--radius-vertical) - 20px)) rotate(calc(var(--angle) - 270deg + 3deg))}.card-component>*:has(+*+*.card-component>*:has(+*:is(:hover,:focus))){transform:translate(calc(cos(var(--angle)) * var(--radius-horizontal) - 20px),calc(sin(var(--angle)) * var(--radius-vertical))) rotate(calc(var(--angle) - 270deg + 1deg))}@container (max-width: 700px){.card-component>*{--arc-spread: 20deg}}@container (max-width: 400px){.card-component>*{--arc-spread: 10deg}}