Card construído usando FLEXBOX

Fala Caio!

Seu projeto ficou muito bom!

Tenho uma sugestão:

• Notei que você utilizou margin pra afastar o card do topo na tentativa de centralizar o card.

Usar margin pra esse objetivo não é a melhor opção. Existe uma maneira melhor e mais eficiente de posicionar elementos no meio da página (tanto na vertical quanto na horizontal):

📌 Aplique isso ao body:

body {
    min-height: 100vh;
    display: flex;  /*  também funciona com grid  */
    justify-content: center;
    align-items: center;
}

Espero que te ajude! 😊

Belo trabalho! Porém, tenho alguns pontos que podem melhorar o seu código:

1) Ao estilizar a página, não necessariamente toda a estilização precisa estar dentro de media query.

Vou te dar um exemplo que não vem do seu código, mas pode te ajudar a entender o que estou querendo dizer:

// Default style
.container {
     background-color: red;
}

// Responsive to max-width 720px
@media screen and (max-width: 720px) {
        .container {
             background-color: blue;
        }
}

Ou seja, o container vai ter sempre a cor de fundo vermelha. Mas quando o tamanho da tela for menor que 720px, a cor de fundo do container vai se tornar azul.

2) Atente-se também a escrita! No seu código foi utilizado uma div com a classe conteiner, quando na verdade a escrita correta dessa palavra seria container.

Geralmente as empresas utilizam todos os nomes de classes, ids e afins em Inglês. Recomendo trocar os nomes que foram utilizados nas classes: titulo e paragrafo para title e paragraph.

3) Sobre a sua dúvida sobre a utilização de grids, neste projeto não houve necessidade da utilização de grids, então fez certo ao utilizar flex.

Espero ter ajudado! E se eu te ajudei, marque este feedback para me ajudar :)