grid-template-areas não funcionou

Segui o que o instrutor passou, mas o resultado não ficou igual. Alguém saberia me dizer onde errei?

@media screen and (min-width: 1440px) {
    .principal {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas: 
            "titulo-pagina titulo-pagina titulo-pagina"
            "destaque-video destaque-video videos-recentes"
            "secao-videos secao-videos secao-videos"
            "produtos-recentes destaque-produtos destaque-produtos"
            "secao-produtos secao-produtos secao-produtos";
        column-gap: 32px;
        padding: 16px 60px;
        grid-column: 2;
    }

.destaque-video {
    grid-area: destaque-video;
}

.videos-recentes {
    grid-area: videos-recentes;
}

.secao-videos {
    grid-area: secao-videos;
}

.destaque-produtos {
    grid-area: destaque-produto;
}

.produtos-recentes {
    grid-area: produtos-recentes;
}

.secao-produtos {
    grid-area: secao-produtos;
}

Coloquei apenas os trechos do código pois tem limite de caracteres, e todas as classes foram adicionadas no HTML