card using html css

Você pode usar flex containers para alinhar os elementos e definir espaços entre eles. Pode ser um pouco desafiador no começo, mas compensa o esforço. Substituindo um trecho do seu código ficaria assim:

antes

section{
    background-color: hsl(216, 50%, 16%);
    padding: 20px;
    border-radius: 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
}

depois

section {
    width: 300px;
    background-color: hsl(216, 50%, 16%);
    padding: 20px;    
    border-radius: 15px;
    
    //muda o display da section para um container flexível 
    display: flex;

    //indica a direção do container como coluna (vertical)
    flex-direction: column;

    //define o espaçamento entre cada elemento da section
    gap: 1.6rem;

    //sombras 
    -webkit-box-shadow: 6px 7px 25px 0px rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 6px 7px 25px 0px rgba(0, 0, 0, 0.19);
    box-shadow: 6px 7px 25px 0px rgba(0, 0, 0, 0.19);
}

Parabéns por terminar mais um desafio 🚀

Excellent work, congratulations for finishing the project. I saw that you did not develop the hover effect applied to the main image, if you need some guidance to implement it, I will gladly support you with any indication when you want.

Have a nice day.

Congratulations on finishing the challenge & all the very best ✌️