Kart 4

/*Magic card4*/
.card4 {
width: 190px;
height: 254px;
background: #f5f5f5;
overflow: visible;
box-shadow: 0 5px 20px 2px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
align-items: center;
}

.card4-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 2em;
padding: 0 1rem;
}

.card4-img {
--size: 100px;
width: var(--size);
height: var(--size);
border-radius: 50%;
transform: translateY(-50%);
background: #42caff;
background: linear-gradient(to bottom, #42caff 0%, #e81aff 100%);
position: relative;
transition: all .3s ease-in-out;
}

.card4-img::before {
content: "";
border-radius: inherit;
position: absolute;
top: 50%;
left: 50%;
width: 90%;
height: 90%;
transform: translate(-50%, -50%);
border: 1rem solid #e8e8e8;
}

/*Text*/
.text-title {
text-transform: uppercase;
font-size: 0.75em;
color: #42caff;
letter-spacing: 0.05rem;
}

.text-body {
font-size: .8em;
text-align: center;
color: #6f6d78;
font-weight: 400;
font-style: italic;
}

/*Hover*/
.card4:hover .card4-img {
--size: 110px;
width: var(--size);
height: var(--size);
}