Problemas com grid na sessão populares

Meus cards da sessão de populares não fica nada igual ao do projeto final, o que eu posso ter errado?

.populares{
    padding: 3rem 2rem;
}

.populares__conteudo{
    display: flex;
    flex-wrap: wrap;
    grid-area: conteudo;
    padding: 1rem 0rem;
}

.populares__card{
    background: #fdfdfd;
    display: grid;
    grid-template-areas: 
    "card-imagem"
    "card-corpo";
    grid-template-columns: 100%;
    grid-template-rows: 173px auto;
    margin-right: 1rem;
    width: calc( 20% - 1rem );
}

.populares__card:last-child {
    margin-right: 0rem;  
}

.populares__card___imagem{
    grid-area: card-imagem;
    height: 100%;
    width: 100%;
}

.populares__card___corpo{
    display: grid;
    grid-area: card-corpo;
    gap: 0.5rem;
    grid-template-areas: 
    "card-cabecalho"
    "card-conteudo";
    grid-template-rows: 50px auto;
    padding: 0.75rem;
}

.populares__card___titulo{
    color: #333333;
    font-size: 1.5rem;
}

.populares__card___data{
    color: #808080;
    font-size: 0.9rem;
}

.populares__card___descricao{
    color: #333333;
    line-height: 1.5;
    margin: 1rem 0;
    text-align: justify;
}

.populares__titulo{
    font-weight: 500;
}

.populares__icone{
    margin-right: 0.25rem;
}

.populares__cabecalho{
    border-bottom: 1px solid #dcdcdc;
    display: flex;
    justify-content: space-between;
}

.populares__botao {
    background: transparent;
    border: none;
    color: #333333;
}