.card{--bg:#f7f7f8;--hover-bg:#f7f7f8;--hover-text:black;text-align:center;background:var(--bg);position:relative;overflow:hidden;transition:.3s cubic-bezier(.6,.4,0,1),transform .15s ease;flex-direction:column;justify-content:flex-start;gap:1em;color:black}.card,.card span{border-radius:5px;display:flex;align-items:center}.card span{position:absolute;inset:0;width:100%;height:100%;justify-content:center;padding:3rem;box-sizing:border-box;color:var(--hover-text);background:#f7f7f8;top:100%;transition:all .3s cubic-bezier(.6,.4,0,1);overflow-y:auto}.card img{display:block}.card:hover span{top:0;font-size:1.2rem}.card:hover{background:var(--hover-bg)}.card:hover>div,.card:hover>strong{opacity:0}