Как правильно прописывать media запросы?
На большом проекте и с препроцессором удобнее писать все медиазапросы прямо внутри css класса, и для каждого компонента (или группы компонентов, типа меню и пункта меню) делать отдельный файл, тогда при работе с компонентом все его стили будут в одном месте в одном файле.
Обычные медиа-запросы в css прописываются так:
@media(размеры экрана устройства){
  Здесь стили, которые требуется поменять
}

Пример:
@media (max-width: 1199px){
    .container{
        width: 960px;
    }
    .catalog{
        text-align: center;
    }
}