[Dúvida] Erro - Resultado diferente do que deu na aula

Fala, Marcelo! Tudo bom com você?

Eu fiz alguns testes aqui com o seu código, e parece que agora tá funcionando. Foram essas alterações aqui que eu fiz e deram certo:

Coloquei um text-align: center no .cartao__titulo

.cartao__titulo {
    font-weight: 700;
    line-height: 1.35rem;
    text-align: center;
}

E mudei o grid-template-columns do .cartao

.secao-horizontal .cartao {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto 3rem 0.9rem;
    column-gap: 1.25rem;
}

Depois dá uma conferida direitinho e vê se ficou bacana.

Provavelmente isso estava sendo causado por algum erro nas proporções que estavam sendo passadas como tamanho.

Espero que tenha ajudo, bons estudos e abraços!

Fala Iury, segui as observações que vc mencionou, mas inda sim continua dando erro. Com tela de 576 o primeiro card ainda continua com um espaço abaixo da figura.

Quando eu diminuo a tela ainda continua dando uma diferença.

Agora se eu diminuir mais o erro pula para outro card.

Segue o código com sua sugestão.

https://drive.google.com/file/d/17yHaZoqhda2zvk7IQh8doNIX6ehE7YCC/view?usp=sharing

Fala, Marcelo! Como é que vai?

Eu fiz mais alguns testes aqui, cara, parece que agora não está dando esse problema não. Depois faz um teste pra você ter uma visão, a única alteração que eu fiz foi essa daqui:

.secao-horizontal .cartao {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: 3em 3rem 0.9rem;
    column-gap: 1.25rem;
}

Defini um tamanho de 3em para a primeira coluna também, do grid-template-rows. Como antes estava no automática, seguia o tamanho do texto, então quando diminuía a tela, o texto quebrava de linha e aumentava o tamanho da linha, enquanto que os outros mantinham padrão.

Espero que agora dê certinho aí, meu amigo, e me dá um retorno aqui, qualquer coisa, pra gente continuar buscando a resposta. Abraços!