fiz as primeira alterações no código e funcionou, porem quando faço para as outras medida de tela o mesmo não funciona, alguém poderia me ajudar já reescrevi o código 6 vezes. obs: os background são para certificar se as @media estão funcionando.
@media screen and (min-width:0){/* midia para celulares*/
.destaques__principal{
grid-column: 1 /5;
}
.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;
}
.destaques__categorias{
grid-column: 1 / 5;
}
.populares__conteudo{
flex-direction: column;
}
.populares__card{
background-color: rgb(71, 105, 255);
grid-template-rows: 150px auto;
margin-bottom: 3rem;
margin-right: 0;
width: 100%;
}
}
/******************************************************************************************************/
@media screen and (min-width:760px){/* midia para tablet*/
.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;
}
.destaques__categorias{
grid-column: 1 / 3;
}
.populares__conteudo{
flex-direction: row;
}
.populares__card{
background-color: rgba(138, 255, 71, 0.808);
grid-template-rows: 150px auto;
margin-bottom: 3rem;
margin-right: 1rem;
width: calc(50%-1rem);
}
}
@media screen and (min-width:992px){/* midia para desktop*/
.populares__card{
background-color: rgba(255, 252, 71, 0.808);
}
}
@media screen and (min-width:1200px){/*para novos itdd */
.populares__card{
background-color: rgb(255, 71, 102);
}
}