[Dúvida] Por que não posso usar o @media no style.css?

Vi que o instrutor decidiu criar outro arquivo .css para fazer o responsivo separadamente. Entendi como parte da didática pra não ficar tão embaralhado, mas em outros cursos já fiz a parte responsiva logo abaixo do .css completo do projeto. Porém se eu fizer o responsivo no final do style.css para evitar criar mais um arquivo, nesse projeto o navegador simplesmente não lê o media query e não expande o grid do destaque principal como foi definido.

@media screen and (min-width: 0) {
    .destaques__principal, .destaques__categorias {
        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;
    }
}
 @media screen and (min-width: 768px) {
    ...
}
 @media screen and (min-width: 992px) {
    ...
}
 @media screen and (min-width: 1200px) {
    ...
}