.card5 {
--bg: #f7f7f8;
--hover-bg: #FFE5F4;
--hover-text: #E50087;
max-width: 23ch;
text-align: center;
background: var(--bg);
padding: 1.5em;
padding-block: 1.8em;
border-radius: 5px;
position: relative;
overflow: hidden;
transition: .3s cubic-bezier(.6,.4,0,1),transform .15s ease;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1em;
}
.card5__body {
color: #464853;
line-height: 1.5em;
font-size: 1em;
}
.card5 > :not(span) {
transition: .3s cubic-bezier(.6,.4,0,1);
}
.card5 > strong {
display: block;
font-size: 1.4rem;
letter-spacing: -.035em;
}
.card5 span {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: var(--hover-text);
border-radius: 5px;
font-weight: bold;
top: 100%;
transition: all .3s cubic-bezier(.6,.4,0,1);
}
.card5:hover span {
top: 0;
font-size: 1.2em;
}
.card5:hover {
background: var(--hover-bg);
}
.card5:hover>div,.card5:hover>strong {
opacity: 0;
}
