In my Next.js project I have a CSS file with a responsive rule:

@media screen and (max-width: 1080px) {
  .content-box {
    flex-direction: column;
  }
}

This rule is correctly applied on my desktop browsers, however it isn't working on my mobile (375px innerWidth). The content-box is not changed to column. Debugging with Safari I can also see that the rule is not being applied.

When I examine the project source code, I see that Next JS has generated its own CSS file called "styles_f15045._.css"

This CSS file has converted my rule to use the <= format:

@media screen and (width <= 768px) {...}

This seems to be what is causing the problem, as when I add the @media rule directly in a style tag, it works as expected.

Is it possible to change the way Next.js repackages my CSS? Or is there another common solution to this issue?