:root{--card-height: 300px;--card-width: calc(var(--card-height) / 1.5)}@media screen{@font-face{font-family:Fira Sans;font-style:normal;font-weight:400;src:local("Fira Sans Regular"),local("FiraSans-Regular"),url(https://fonts.gstatic.com/s/firasans/v8/va9E4kDNxMZdWfMOD5Vvl4jLazX3dA.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Fira Sans;font-style:normal;font-weight:400;src:local("Fira Sans Regular"),local("FiraSans-Regular"),url(https://fonts.gstatic.com/s/firasans/v8/va9E4kDNxMZdWfMOD5Vvk4jLazX3dGTP.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Fira Sans;font-style:normal;font-weight:500;src:local("Fira Sans Medium"),local("FiraSans-Medium"),url(https://fonts.gstatic.com/s/firasans/v8/va9B4kDNxMZdWfMOD5VnZKveRhf6Xl7Glw.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Fira Sans;font-style:normal;font-weight:500;src:local("Fira Sans Medium"),local("FiraSans-Medium"),url(https://fonts.gstatic.com/s/firasans/v8/va9B4kDNxMZdWfMOD5VnZKveQhf6Xl7Gl3LX.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Fira Sans;font-style:normal;font-weight:700;src:local("Fira Sans Bold"),local("FiraSans-Bold"),url(https://fonts.gstatic.com/s/firasans/v8/va9B4kDNxMZdWfMOD5VnLK3eRhf6Xl7Glw.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Fira Sans;font-style:normal;font-weight:700;src:local("Fira Sans Bold"),local("FiraSans-Bold"),url(https://fonts.gstatic.com/s/firasans/v8/va9B4kDNxMZdWfMOD5VnLK3eQhf6Xl7Gl3LX.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Fira Sans;font-style:normal;font-weight:800;src:local("Fira Sans ExtraBold"),local("FiraSans-ExtraBold"),url(https://fonts.gstatic.com/s/firasans/v8/va9B4kDNxMZdWfMOD5VnMK7eRhf6Xl7Glw.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Fira Sans;font-style:normal;font-weight:800;src:local("Fira Sans ExtraBold"),local("FiraSans-ExtraBold"),url(https://fonts.gstatic.com/s/firasans/v8/va9B4kDNxMZdWfMOD5VnMK7eQhf6Xl7Gl3LX.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}}*{box-sizing:border-box}body{width:100vw;height:100vh;margin:0;display:flex;justify-content:center;align-items:center;background:#fefeff}.card{width:var(--card-width);height:var(--card-height);position:relative;display:flex;justify-content:center;align-items:flex-end;padding:0;perspective:2500px;margin:0;border:0}.cover-image{width:100%;height:300px;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;text-align:center;min-width:160px;position:absolute;bottom:0;color:#fff;font-family:Fira Code Retina,serif;font-size:21px}.card:hover .title{transform:translate3d(0,-30px,100px)}.character{width:100%;opacity:0;transition:all .5s;position:absolute;z-index:-1}.card:hover .character{opacity:1;transform:translate3d(0,-30%,100px)}a{text-decoration:none;color:#fff}@media(max-width:768px){.container{padding:20px 15px}}