As imagens de populares__card___imagem não se ajustaram e ficaram ocupando 100%

Durante o curso, o instrutor cria o .populares__card___imagem e adiciona as propriedades grid-area, height e width, porém ao fazer isso as imagens sumiram para o instrutor, segui o mesmo passo e as imagens não sumiram, ao término do vídeo as imagens se ajustaram, mas as minhas continuam preenchendo 100% da pagina, já verifiquei o código e não encontrei o erro, alguém pode me ajudar?

o código é:

.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___imagem {
    grid-area: card-imagem;
    height: 100%;
    width: 100%;
}

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