.card {
display: grid;
margin-bottom: 2rem;
border-radius: 1rem;
overflow: hidden;
position: relative;
background: linear-gradient(to top, rgba(233, 228, 241, 0.5), transparent 100%);
border-style: solid;
border-width: 1px;
}
.card a {
display: block;
position: relative;
text-decoration: none;
}
.cardtext {
display: grid;
align-items: end;
opacity: 0;
transition: bottom .3s, opacity .3s;
padding: 1.5rem;
position: absolute;
bottom: -20px;
background: linear-gradient(360deg, #000000cf 60%, transparent 100%);
}
.card:hover .cardtext {
opacity: 1;
bottom: -20px;
}
.card a span {
font-size: 1em;
display: block;
line-height: 1.1;
font-weight: 700;
}