:root{--border: rgb(3, 169, 244);--g1: rgb(98, 0, 234);--g2: rgb(236, 64, 122);--g3: rgb(253, 216, 53)}body{background-color:#0a0a0a;display:grid;height:100vh;margin:0;padding:0;place-items:center}.card{aspect-ratio:1 / 1.6;border:.5vmin solid var(--border);cursor:pointer;position:relative;width:56vmin}.card:hover:before{background-position:100% 100%;transform:scale(1.08,1.03)}.card:hover>.card-content{background-position:-10% 0%}.card:hover>.card-icon{color:#fff}.card:hover>.card-content>.card-subtitle>.card-subtitle-word{opacity:1;transform:translateY(0);transition:opacity 0ms,transform .2s cubic-bezier(.9,.06,.15,.9)}.card:before{background:linear-gradient(130deg,transparent 0% 33%,var(--g1) 66%,var(--g2) 83.5%,var(--g3) 100%);background-position:0% 0%;background-size:300% 300%;content:"";height:100%;left:0;pointer-events:none;position:absolute;top:0;transition:background-position .35s ease,transform .35s ease;width:100%;z-index:1}.card-content{background-image:radial-gradient(rgba(255,255,255,.2) 8%,transparent 8%);background-position:0% 0%;background-size:5vmin 5vmin;height:calc(100% - 10vmin);padding:5vmin;position:relative;transition:background-position .35s ease;width:calc(100% - 10vmin);z-index:2}.card-title,.card-subtitle{color:#fff;font-family:Anek Latin,sans-serif;font-weight:400;margin:0}.card-title{font-size:6vmin}.card-subtitle{font-size:3vmin;margin-top:2vmin}.card-subtitle-word{display:inline-block;margin:0vmin .3vmin;opacity:0;position:relative;transform:translateY(40%);transition:none}.card-icon{bottom:0;color:#ffffff80;font-size:7vmin;left:0;margin:5vmin;position:absolute;transition:color .25s ease;z-index:2}