:root{--card-width:calc(var(--card-height) / 1.5);--card-width_s:calc(var(--card-height_s) / 1.5);--card-height:360px;--card-height_s:360px;--card-title-width:178px;--card-title-height:60px}@media (min-width:1280px){:root{--card-height:510px;--card-height_s:420px;--card-title-width:202px;--card-title-height:110px}}@media (min-width:1024px){:root{--card-height:450px;--card-height_s:360px;--card-title-width:184px;--card-title-height:100px}}.card{min-width:var(--card-width);min-height:var(--card-height)}.card,.card-side{cursor:pointer;position:relative;display:flex;justify-content:center;align-items:flex-end;padding:0 36px;perspective:2500px}.card-side{min-width:var(--card-width_s);min-height:var(--card-height_s)}.card-side-end{min-width:180px;min-height:270px}@media (min-width:1280px){.card-side-end{min-width:220px;min-height:330px}}.cover-image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.card-wrapper{transition:all .5s;position:absolute;width:100%;z-index:-1}@media (min-width:1024px){.card:hover .card-wrapper{transform:perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0)}}.card-wrapper:after,.card-wrapper:before{content:"";opacity:0;width:100%;height:80px;transition:all .5s;position:absolute;left:0}.card-wrapper:before{top:0;height:100%}.card-wrapper:after{bottom:0;opacity:1}@media (min-width:1024px){.card-wrapper:after,.card:hover .card-wrapper:before{opacity:1}.card:hover .card-wrapper:after{height:120px}}.card-title{width:100%;transition:transform .5s}@media (min-width:1024px){.card:hover .card-title{transform:translate3d(0,-50px,100px)}}.card-character{width:100%;opacity:0;transition:all .5s;position:absolute;z-index:-1}@media (min-width:1024px){.card:hover .card-character{opacity:1;transform:translate3d(0,-30%,100px)}.card-side:hover .card-wrapper{transform:perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0)}.card-side:hover .card-wrapper:before,.card-wrapper:after{opacity:1}.card-side:hover .card-wrapper:after{height:120px}.card-side:hover .card-title{transform:translate3d(0,-50px,100px)}.card-side:hover .card-character{opacity:1;transform:translate3d(0,-30%,100px)}}