body{background-color:#000;margin:0;height:100vh;display:grid;place-items:center}.card-groups,.card-group,.card{aspect-ratio:5 / 7}.card-groups,.card-group,.big-card{width:30vmin}.card-group{position:absolute;transition:transform .4s ease}.card-group[data-status=unknown]{transform:scale(0);transition:none}.card-group[data-status=active]{transition-delay:.3s}.card-group[data-status=after]{transform:translate(50%) scale(0)}.card-group[data-status=before]{transform:translate(-50%) scale(0)}.card-group[data-status=becoming-active-from-after]{transform:translate(50%) scale(0);transition:none}.card-group[data-status=becoming-active-from-before]{transform:translate(-50%) scale(0);transition:none}.card{background-color:#ffffff0d;position:absolute;transition:transform .8s cubic-bezier(.05,.43,.25,.95);background-position:center;background-size:cover}.big-card{border-radius:1vmin}.little-card{width:12vmin;border-radius:2vmin;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:-1vmin 1vmin 2vmin #00000040;pointer-events:none}.big-card:nth-child(2){background-image:url(https://i.pinimg.com/1200x/da/00/a2/da00a20145f37055446a9c7dadc67b1e.jpg);transform:translate(-10%) rotate(-1deg)}.big-card:nth-child(4){background-image:url(https://i.pinimg.com/1200x/00/02/d1/0002d11fd45fc9180dc912525833768d.jpg);transform:rotate(2deg)}.big-card:nth-child(6){background-image:url(https://i.pinimg.com/1200x/5b/7f/3a/5b7f3acfca6e92e4d074982205418aa8.jpg);transform:translate(-6%) rotate(-3deg)}.big-card:nth-child(8){background-image:url(https://i.pinimg.com/1200x/1a/76/e7/1a76e791585f98335a4687b5c9ef2d6e.jpg);transform:translate(10%,3%) rotate(5deg)}.card-group[data-index="1"]>.big-card:nth-child(6){background-image:url(https://i.pinimg.com/1200x/f6/6b/10/f66b1063abc59e6176bfac5a9c74d017.jpg)}.card-group[data-index="1"]>.big-card:nth-child(8){background-image:url(https://i.pinimg.com/1200x/d5/42/28/d542286c9ff15745dfd2eedacd5a9150.jpg)}.card-group[data-index="2"]>.big-card:nth-child(4){background-image:url(https://i.pinimg.com/1200x/b1/98/f1/b198f162fed7b096f66f1446d39e4da5.jpg)}.card-group[data-index="2"]>.big-card:nth-child(8){background-image:url(https://i.pinimg.com/1200x/38/7f/f3/387ff32d7c464c6d1ba94c562bedb53d.jpg)}.little-card:nth-child(1){background-image:url(https://i.pinimg.com/1200x/48/ce/da/48ceda38df3de9cfc6da82aa372bc3a3.jpg)}.little-card:nth-child(3){background-image:url(https://i.pinimg.com/1200x/28/39/b7/2839b7a48f59c1d3df70d6fb7cc3d11c.jpg)}.little-card:nth-child(5){background-image:url(https://i.pinimg.com/1200x/22/16/2d/22162d447b59d0bc3acaff25c694336b.jpg)}.little-card:nth-child(7){background-image:url(https://i.pinimg.com/1200x/33/f0/7e/33f07e05fcba33afd69635f845d04c68.jpg)}.card-group:hover>.card{box-shadow:-2vmin 2vmin 3vmin #0006}.card-group:hover>.big-card:nth-child(2){transform:translate(-75%,16%) rotate(-24deg)}.card-group:hover>.big-card:nth-child(4){transform:translate(-25%,8%) rotate(-8deg)}.card-group:hover>.big-card:nth-child(6){transform:translate(25%,8%) rotate(8deg)}.card-group:hover>.big-card:nth-child(8){transform:translate(75%,16%) rotate(24deg)}.card-group:hover>.little-card:nth-child(1){transform:translate(200%,-160%) rotate(-15deg)}.card-group:hover>.little-card:nth-child(3){transform:translate(160%,170%) rotate(15deg)}.card-group:hover>.little-card:nth-child(5){transform:translate(-200%,-170%) rotate(15deg)}.card-group:hover>.little-card:nth-child(7){transform:translate(-280%,140%) rotate(-15deg)}.card-swiper-buttons{margin-top:8vmin;display:flex;justify-content:space-around;padding:0vmin 4vmin}.card-swiper-buttons>button{font-size:2.5vmin;border:.4vmin solid white;border-radius:100%;color:#fff;background-color:transparent;height:7vmin;width:7vmin;display:grid;place-items:center;cursor:pointer}.card-swiper-buttons>button>svg>g{fill:#fff}