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?