:root{--card-height: 300px;--card-width: calc(var(--card-height) / 1.5)}*{box-sizing:border-box}@media only screen and (max-width: 767px){.card-container{margin-top:350px}}body{width:100vw;height:100vh;margin:0;display:flex;justify-content:center;align-items:center;background:#191c29}.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 50px}.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 #000000bf;-webkit-box-shadow:2px 35px 32px -8px rgba(0,0,0,.75);-moz-box-shadow:2px 35px 32px -8px rgba(0,0,0,.75)}.wrapper:before,.wrapper:after{content:"";opacity:0;width:100%;height:80px;transition:all .5s;position:absolute;left:0}.wrapper:before{top:0;height:100%;background-image:linear-gradient(to top,transparent 46%,rgba(12,13,19,.5) 68%,rgba(12,13,19) 97%)}.wrapper:after{bottom:0;opacity:1;background-image:linear-gradient(to bottom,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)}.card-container{display:flex;flex-wrap:wrap}.grid-item{flex:1;margin:10px;text-decoration:none}.card{padding:10px;text-align:center}.wrapper{overflow:hidden}.cover-image,.title,.character{max-width:100%;height:auto}@media (max-width: 768px){.card-container{flex-direction:column}.grid-item{width:100%}}