.container-3d{width:260px;height:370px;margin:0 auto;transition:all .2s;position:relative}.container-3d:active{transform:scale(.97)}.canvas-3d{perspective:800px;z-index:200;grid-template-rows:repeat(5,1fr);grid-template-columns:repeat(5,1fr);grid-template-areas:"tr-1 tr-2 tr-3 tr-4 tr-5""tr-6 tr-7 tr-8 tr-9 tr-10""tr-11 tr-12 tr-13 tr-14 tr-15""tr-16 tr-17 tr-18 tr-19 tr-20""tr-21 tr-22 tr-23 tr-24 tr-25";display:grid;position:absolute;inset:0}.card-inner{z-index:0;transition:transform .5s ease-out,filter .3s;position:absolute;inset:0}.tracker{z-index:200;cursor:pointer;width:100%;height:100%;position:absolute}.tracker:hover~.card-inner{filter:brightness(1.2);transition:all .15s ease-out}.tr-1{grid-area:tr-1}.tr-2{grid-area:tr-2}.tr-3{grid-area:tr-3}.tr-4{grid-area:tr-4}.tr-5{grid-area:tr-5}.tr-6{grid-area:tr-6}.tr-7{grid-area:tr-7}.tr-8{grid-area:tr-8}.tr-9{grid-area:tr-9}.tr-10{grid-area:tr-10}.tr-11{grid-area:tr-11}.tr-12{grid-area:tr-12}.tr-13{grid-area:tr-13}.tr-14{grid-area:tr-14}.tr-15{grid-area:tr-15}.tr-16{grid-area:tr-16}.tr-17{grid-area:tr-17}.tr-18{grid-area:tr-18}.tr-19{grid-area:tr-19}.tr-20{grid-area:tr-20}.tr-21{grid-area:tr-21}.tr-22{grid-area:tr-22}.tr-23{grid-area:tr-23}.tr-24{grid-area:tr-24}.tr-25{grid-area:tr-25}.tr-1:hover~.card-inner{transform:rotateX(20deg)rotateY(-10deg)}.tr-2:hover~.card-inner{transform:rotateX(20deg)rotateY(-5deg)}.tr-3:hover~.card-inner{transform:rotateX(20deg)rotateY(0)}.tr-4:hover~.card-inner{transform:rotateX(20deg)rotateY(5deg)}.tr-5:hover~.card-inner{transform:rotateX(20deg)rotateY(10deg)}.tr-6:hover~.card-inner{transform:rotateX(10deg)rotateY(-10deg)}.tr-7:hover~.card-inner{transform:rotateX(10deg)rotateY(-5deg)}.tr-8:hover~.card-inner{transform:rotateX(10deg)rotateY(0)}.tr-9:hover~.card-inner{transform:rotateX(10deg)rotateY(5deg)}.tr-10:hover~.card-inner{transform:rotateX(10deg)rotateY(10deg)}.tr-11:hover~.card-inner{transform:rotateX(0)rotateY(-10deg)}.tr-12:hover~.card-inner{transform:rotateX(0)rotateY(-5deg)}.tr-13:hover~.card-inner{transform:rotateX(0)rotateY(0)}.tr-14:hover~.card-inner{transform:rotateX(0)rotateY(5deg)}.tr-15:hover~.card-inner{transform:rotateX(0)rotateY(10deg)}.tr-16:hover~.card-inner{transform:rotateX(-10deg)rotateY(-10deg)}.tr-17:hover~.card-inner{transform:rotateX(-10deg)rotateY(-5deg)}.tr-18:hover~.card-inner{transform:rotateX(-10deg)rotateY(0)}.tr-19:hover~.card-inner{transform:rotateX(-10deg)rotateY(5deg)}.tr-20:hover~.card-inner{transform:rotateX(-10deg)rotateY(10deg)}.tr-21:hover~.card-inner{transform:rotateX(-20deg)rotateY(-10deg)}.tr-22:hover~.card-inner{transform:rotateX(-20deg)rotateY(-5deg)}.tr-23:hover~.card-inner{transform:rotateX(-20deg)rotateY(0)}.tr-24:hover~.card-inner{transform:rotateX(-20deg)rotateY(5deg)}.tr-25:hover~.card-inner{transform:rotateX(-20deg)rotateY(10deg)}.noselect{-webkit-user-select:none;user-select:none}