title: Media queries in Next JS
body: <p>I've been trying and looking for some hours now and I couldn't find a solution for my issue.
  I'm trying to use different files for my media query breakpoints in Next JS, and they seem to not do anything.</p>
  <p>I created them in:
  styles/queries/sizeone.css (the first breakpoint)</p>
  <p>I imported them on my _app.tsx just like this, and also overwrited the viewport tag from default Next JS head.</p>
  <pre class="lang-js prettyprint-override"><code>import { AppProps } from 'next/app';
  import Head from 'next/head'
  
  import '../styles/globals.css'
  import '../styles/normalize.css'
  import '../styles/queries/sizeone.css'
  
  function App({ Component, pageProps }: AppProps) {  
    return (
      &lt;&gt;
      &lt;Head&gt;
        &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
      &lt;/Head&gt;
      &lt;Component {...pageProps} /&gt;
      &lt;/&gt;
    )
  }
  
  export default App;
  </code></pre>
  <p>This is what I'm doing inside my sizeone.css file, it's just a simple media query.</p>
  <pre class="lang-css prettyprint-override"><code>@media only screen and (min-width: 1px) and (max-width: 767px){
    #hero .content .title h1 {
      text-align: center;
      color: var(--main-color);
      font-family: var(--main-font);
      font-weight: 700;
      font-size: 20px;
      margin: 0 0;
    }
  }
  </code></pre>
  <p>This is how I'm applying styles to the elements:</p>
  <pre class="lang-js prettyprint-override"><code>            &lt;section id={styles.hero}&gt;
                  &lt;div className=&quot;wrapper&quot;&gt;
                      &lt;div className={styles.content}&gt;
  
                          &lt;div className={styles.title}&gt;
                              &lt;h1&gt;Creating &lt;span className=&quot;gradient-text&quot;&gt;remarkable&lt;/span&gt; &lt;br /&gt;&lt;span className=&quot;gradient-text&quot;&gt;experiences&lt;/span&gt; through digital art.&lt;/h1&gt;
                              &lt;p&gt;Freelancing UI/UX design &amp; Front-end development&lt;/p&gt;
  </code></pre>
  <p>This is the piece that is shown on the sizeone.css file.</p>
  <p>Thank you for taking your time and reading my question, hope we can find a solution for this :)</p>