Four card feature w/ GRID

Oi de novo Paula! Acabei de ver sua solução da pagina skilled e vi que vc conseguiu arrumar o erro da imagem que nao trocava de uma pra outra com picture. Mto bom!

Vi sua solução e tenho duas dicas, uma é sobre o card e outra sobre usar um CSS reset pra ajustar todos erros que o css default tem:

Adicionando uma margem pra evitar o card tocando a borda da tela enquanto escala (isso é bom pra colocar no h1 e no paragrafo acima dos cards)

.cards {
    margin: 20px;
    display: grid;
    gap: 23px;
    justify-content: center;
}

Uma coisa que você pode fazer pra economizar tempo é usar um CSS RESET, pro arquivo de estilo CSS e copiar e colar esse reset padrão que reseta varios comportamentos default do CSS que são um pouco chatos de usar, como margens, imagens, animações e etc. Vai salvar um bom tempo usar isso desde o começo: https://piccalil.li/blog/a-modern-css-reset/

Espero que te ajude!