@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