SN7iNC

@media only screen 
and (min-width: 320px) and (max-width: 400px){
 /* бла бла бла */}
}

.class-1{}
 .class-2{}

@media (max-width: 767px) {
  .class-1 { /* стили для экранов 767px и менее */  }
  .class-2 { /* стили для экранов 767px и менее */  }
}

Лучше определить для себя как удобнее:
1. Работать с "@media" и группой различных .class
2. Или Работать с каждым ".class" в различных "@media"

Для себя выбираю ПЕРВОЕ. (считаю это более грамотный подход, ибо "@media" может быть много - при нескольких условиях)