a partir da segunda querie de 768px não funciona...

@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 / 4;
        grid-row: 3 / 3;
    }

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

    /* POPULARES */

    .populares__conteudo{
        flex-direction: column;
    }

    .populares__card{
        grid-template-rows: 173px auto;
        margin-right: 1rem;
        margin-bottom: 3rem;
        width:calc(50% - 1rem);
    }

}

Os cards não começam a ficar um do lado do outro, é como se estivessem em um inline block