title: Override styles in media queries with custom CSS
body: <p>I'm writing some <code>overrides.css</code> for existing system and want to know what are the ways I can override some styles. I don't have access to system css so I can't rewrite it.</p>
  
  <p>If I have the following definitions in the original system:</p>
  
  <pre><code>#criterionDetailsWrapper {
      background-color: green;
  }
  
  @media screen and (max-width: 979px) {
      #criterionDetailsWrapper {
          background-color: blue;
      }
  }
  
  
  @media screen and (max-width: 667px) {
      #criterionDetailsWrapper {
          background-color: grey;
      }
  }
  </code></pre>
  
  <p>How Can I override these styles e.g. to have</p>
  
  <p>I. One property overridden for all dimensions:</p>
  
  <pre><code>.criterionDetailsWrapper {
     background-color: grey;
  }
  </code></pre>
  
  <p>II. Override one property change to not have 2 break points to but only 1 break point e.g. at <code>600px</code>?</p>
  
  <pre><code>#criterionDetailsWrapper {
     background-color: grey;
  }
  
  
   @media screen and (max-width: 600px) {
      #criterionDetailsWrapper {
          background-color: blue;
      }
  }
  </code></pre>
  
  <p><strong>Is <code>!important</code> the only way to do it, or I need to mimic all selector (to get same specificity) and ensure that my custom CSS is rendered the last?</strong></p>