Почему не работает каскад?

Доброго дня!
Работаю над макетом, и делаю каскад размера шрифтов.
На блок текста у меня привязан только один класс, ответственный за изменение размеров.
Вот его SCSS:

.heading_size_xxl {
  font-size: 6.4rem;
  line-height: 7.0rem;

  @media (max-width: 992px) {
    font-size: 4.2rem;
    line-height: 5.4rem;
  }
  @media (max-width: 767px) {
    font-size: 3.6rem;
    line-height: 4.6rem;
  }
  @media (max-width: 595px) {
    font-size: 2.8rem;
    line-height: 3.4rem;
  }
}

По какой-то причине для ширины экрана меньше 595px мне приходится ставить !important, иначе вместо этого работают правила для 767px.
Почему это так? Ведь каскад правильный! И больше никакие классы не влияют на размер шрифта в этом блоке.
Может проблема в задании через rem ? (но вообще звучит дико)
Можно ли как-то иначе организовать каскад, чтобы мне не приходилось ставить important?