Responsividade utilizando grids

Do jeito que o professor fez a responsividade acho que escreve muito mais linhas de códigos do que somente colocar um display none no .destaques__secundarios

Modelo do professor para @media 0px

@media screen and (min-width: 0) {
    .destaques__secundario:nth-child(2) {
        display: none;
        grid-column: none;
        grid-row: none;
    }

    .destaques__secundario:nth-child(3) {
        display: none;
        grid-column: none;
        grid-row: none;
    }

    .destaques__secundario:nth-child(4) {
        display: none;
        grid-column: none;
        grid-row: none;
    }

    .destaques__secundario:nth-child(5) {
        display: none;
        grid-column: none;
        grid-row: none;
    }
}

Modelo mais curto @media 0px:

@media screen and (min-width: 0) {
    .destaques__principal, .destaques__categorias {
        grid-column: 1 / 5;
    }

    .destaques__secundario {
        display: none;
    }

}

Modelo do professor para telas maiores de 768px:

@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;
    }
}

Minha resolução:

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

    .destaques__secundario {
        display: flex;
    }

    .destaques__categorias {
        grid-column: 1 / 3;
    }
}