Sobre media eu realmente fiquei sem entender o motivo de ter retirado os elementos do arquivo principal do destaques.css e ter colocado apenas no responsivo uma vez que ele irá funcionar apenas para dispositivos menores, não fez sentido para mim.
Seguindo essa linha de raciocínio, pego o exemplo dado na aula:
@media screen and (min-width: 0) {
/*celulares*/
.cabecalho {
background: yellow;
}
}
@media screen and (min-width: 768px) {
/*tablets*/
.cabecalho {
background: black;
}
}
@media screen and (min-width: 992px) {
/*desktops antigos*/
.cabecalho {
background: blue;
}
}
@media screen and (min-width: 1200px) {
/*desktops novos e tvs*/
.cabecalho {
background: red;
}
}Uma vez explicitado isso, o que foi feito, no caso, foi retirado do destaques.css do .destaques__principal o elemento grid-column: 1 / 4 e criado o elemento dentro do @media de 768px o grid-column: 1 / 4 de .destaques__principal e do @media 0 o grid-column: 1 / 5 de .destaques__principalno arquivo responsivo.css. Ora, mas aí que não faz sentido, pois uma vez que foi retirado de lá do arquivo de destaques, lá funcionaria para telas normais, e já para esse media, funciona apenas para media abaixo de 768px, tablets, seguindo a mesma lógica das cores. Assim tbm, foi seguido e tirado todos os grids dos .destaques__secundario:nth-child e colocado no media de 768px e 0, por quê? Na minha cabeça não fez sentido fazer isso e também não sei como funcionou, pois novamente pela lógica das cores, teria que funcionar apenas para resoluçõpes menores ou iguais a 768px, já que acima disso não tinha mais nada definido. O que faria sentido pra mim seria deixar os grids de destaques lá no arquivo de destaques e ir trabalhando com as resoluções de visualização que se queira alcançar nas outras. Podem me tirar essa dúvida?
