Jak poprawie uzywać @media w CSS?

Question

Witam, posiadam dwa bardzo aseksowne media queries, jak mógłbym zmodyfikować je tak by uniknąć redundancji? Np. w oby dwóch przypadkach klasa "collapsing_menu" zawiera te same instrukcje, natomiast w kolejnym większym @media ma już inne. Jak napisać je poprawnie?

  .collapsing_menu{
    position: static;
  } 
@media screen and (max-width: 576px) {
  .collapsing_menu{
    position: absolute;
    top: 100%;
    z-index: 2;
    display: none;
  }
  .intro_title h1{
    font-size: 12vw;
  }
 /*...Inne reguły...*/
}

@media screen and (min-width: 577px) and (max-width: 768px){
  .collapsing_menu{
    position: absolute;
    top: 100%;
    z-index: 2;
    display: none;
  }
  .intro_title h1{
    font-size: 7vw;
  }
 /*..Inne reguły niż w media (max-width: 576px)...*/
}

 

Answer 1

Ja bym pierwsze media query dał jako zachowanie domyślne, a drugie zostawił jak jest. Chyba że /*...Inne reguły...*/ jakoś w tym przeszkadzają.