.ribbon{position:absolute;font-size:10px;top:0;right:0;width:150px;height:22px;margin-right:-50px;margin-top:15px;transform:rotate(45deg)}.micard{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}.micover-image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.miwrapper{transition:all .5s;position:absolute;width:100%;z-index:-1}.micard:hover .miwrapper{transform:perspective(900px) translateY(-5%) rotateX(50deg) 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)}.miwrapper:before,.miwrapper:after{content:"";opacity:0;width:100%;height:80px;transition:all .5s;position:absolute;left:0}.miwrapper:before{top:0;height:100%;background-image:linear-gradient(to top,transparent 46%,rgba(12,13,19,.5) 68%,rgba(12,13,19) 97%)}.miwrapper:after{bottom:0;opacity:1;background-image:linear-gradient(to bottom,transparent 46%,rgba(12,13,19,.5) 68%,rgba(12,13,19) 97%)}.micard:hover .miwrapper:before,.miwrapper:after{opacity:1}.micard:hover .miwrapper:after{height:120px}.mititle{width:100%;transition:transform .5s}.micard:hover .mititle{transform:translate3d(0,-50px,100px)}.micharacter{width:100%;opacity:0;transition:all .5s;position:absolute;z-index:-1}.micard:hover .micharacter{opacity:1;transform:translate3d(0,-30%,100px)}