:root{--card-height:300px;--card-width:calc(var(--card-height) / 1.5)}.card{width:var(--card-width);height:var(--card-height);position:relative;display:flex;justify-content:center;align-items:flex-end;padding:0 36px;perspective:2500px;margin:0 20px 40px;background:transparent}.cover-image{width:100%;height:100%;object-fit:cover}.wrapper{transition:all .5s;position:absolute;width:100%;z-index:-1}.card:hover .wrapper{transform:perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);box-shadow:2px 35px 32px -8px rgba(0,0,0,.75)}.wrapper:after,.wrapper:before{content:"";opacity:0;width:100%;height:80px;transition:all .5s;position:absolute;left:0}.wrapper:before{top:0;height:100%;background-image:linear-gradient(0deg,transparent 46%,rgba(12,13,19,.5) 68%,rgba(12,13,19) 97%)}.wrapper:after{bottom:0;opacity:1;background-image:linear-gradient(180deg,transparent 46%,rgba(12,13,19,.5) 68%,rgba(12,13,19) 97%)}.card:hover .wrapper:before,.wrapper:after{opacity:1}.card:hover .wrapper:after{height:120px}.title{width:100%;transition:transform .5s}.card:hover .title{transform:translate3d(0,-50px,100px)}.character{width:100%;opacity:0;transition:all .5s;position:absolute;z-index:-1}.card:hover .character{opacity:1;transform:translate3d(0,-30%,100px)}