title: CSS: Multiple `!important` instances on the same Class
body: <p>I have a, for me, strange situation that I have never came across before.</p>
  
  <p>I have created a <code>class</code> that defines a <code>font-size</code> of <code>0.8vw</code><br>
  If the screen-size-width is smaller then 750px a new <code>media query</code> is loaded where the <code>font-size</code> is <code>3.2vw</code>.</p>
  
  <p>Because this is the same class I have to use <code>!important</code> on the 750px query.</p>
  
  <p>Here comes the problem.... If, and there is, there will be another <code>media-query</code> I have to use another <code>!important</code> but as far as I know that won't be possible.</p>
  
  <p>I'm starting to think that I don't fully understand how to use the <code>media-queries</code> in combination with different styles.</p>
  
  <p>Here is an example of how this should go:</p>
  
  <pre><code>@media (max-width: 750px) {
    .header_devider{
      font-size: 3.2vw !important;
    }
  }
  
  @media (max-width: 320px) {
    .header_devider{
      font-size: 4vw !important;
    }
  }
  
  .header_devider{
      font-size: 0.8vw;
  }
  
  &lt;div class="header_devider"&gt;
      test content
  &lt;/div&gt;
  </code></pre>
  
  <p>Hope somebody can tell me how to fix this.</p>
  
  <p>M.</p>