Почему могут не работать CSS медиа запросы под определенные разрешения?
потому что у вас не так написаны запросы, если вы хотите делать под конкретные разрешения, нужно писать так @media (min-width: 992px) and (max-width:1170px){
	
}
@media (min-width: 768px) and (max-width:991px){
	
}
@media (min-width: 480px) and (max-width:767px){
	
}
и т.д.
ну и разрешения свои если надо подставляете
и по какой причине могут перекрывать друг друга.
В этом собственно и смысл медиа запросов - подключать и ставить в большем приоритете стили под определённый размер экрана:@media only screen and (max-width: 1280px) {...}Заменит стили при экране <= 1280px (и равносильных селекторах ) предыдущий  (max-width: 1920px), т.к. стоит ниже в коде.
С (min-width: 1360px) всё просто - при размере экрана < 1360px этот стиль убирается, т.к. min-width применяется как "для размера больше чем Х"
P.S.@media only screen and (min-width: 780px) and (max-width: 1280px) {...}
В таком виде придётся переписывать каждый раз все изменённые елементы для каждого отрезка, так что учитывайте это тоже. Лучше будет совмещать просто (max-width: 1280px) и отрезки (min-width: 780px) and (max-width: 1280px)@media only screen and (max-width: 1280px) {
  .block {
    font-size: 14px;
    text-align: center;
    color: grey;
  }
}
@media only screen and (max-width: 992px) {
  .block {
     font-size: 12px;
  }
}
VS@media (min-width: 992px) and (max-width:1280px)
{
  .block {
    font-size: 14px;
    text-align: center;
    color: grey;
  }
  
}
@media (min-width: 768px) and (max-width:991px)
{
  .block {
    font-size: 12px;
    text-align: center;
    color: grey;
  }  
}