Porque o CSS não esta se aplicando da forma correto como a do Professor..?

<section class="populares">
            <div class="populares__itens">
                <div class="populares__info">
                    <div class="populares__cabecalho">
                        <h4 class="populares__titulo">
                            <i class="populares__icone fab fa-buromobelexperte"></i>
                            Aplicativos populares
                        </h4>
                        <button class="populares__botao">
                            <i class="fas fa-th"></i>
                            Visualizar todos
                        </button>
                    </div>
                </div>
                <div class="populares__conteudo">
                    <div class="populares__card">
                        <img class="populares__card___imagem" src="./assets/img/slack.png"></img>

.populares {
    padding: 3rem 0;
}

.populares__card {
    background-color: #fdfdfd;
    display: grid;
    grid-template-areas:
        "card-imagem"
        "card-corpo";
    grid-template-columns: 100%;
}

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