Tag grid-area para diminuir o número de linhas de código

O jogo Grid Garden que o professor recomenda fazer ao final do curso, onde se encontra nesse link https://cssgridgarden.com/. Apresenta uma propriedade nova que é uma abreviatura para as seguintes propriedades CSS, respectivamente:

• grid-row-start
• grid-column-start
• grid-row-end
• grid-column-end

No bloco de código abaixo eu troquei as propriedades separadas grid-column e grid-row por grid-area porque diminui a quantidade de código. Logo abaixo, está o código sobrescrito com a propriedade grid-area.

@media screen and (min-width: 768px) {
    .destaques__principal {
        grid-column: 1 / 4;
    }

    .destaques__secundario:nth-child(2) {
        display: flex;
        grid-area: 1 / 4 / 1 / 4;
    }
    .destaques__secundario:nth-child(3) {
        display: flex;
        grid-area: 2 / 4 / 2 / 4;
    }
    .destaques__secundario:nth-child(4) {
        display: flex;
        grid-area: 3 / 4 / 3 / 4;
    }
    .destaques__secundario:nth-child(5) {
        display: flex;
        grid-area: 3 / 3 / 3 / 3;
    }

E logo a seguir, encontra-se o código do curso:

@media screen and (min-width: 768px) {
    .destaques__principal {
        grid-column: 1 / 4;
    }

    .destaques__secundario:nth-child(2) {
        display: flex;
        grid-column: 4 / 4;
        grid-row: 1 / 1;
    }
    .destaques__secundario:nth-child(3) {
        display: flex;
        grid-column: 4 / 4;
        grid-row: 2 / 2;
    }
    .destaques__secundario:nth-child(4) {
        display: flex;
        grid-column: 4 / 4
        grid-row: 3 / 3;
    }
    .destaques__secundario:nth-child(5) {
        display: flex;
        grid-column: 3 / 3;
        grid-row:  3 / 3;
    }

Espero que tenha contribuído.