Description:
The problem occurs when using at-rules to set element parameters at different breakpoints. The compiled CSS outputs media queries in the wrong order, which breaks the expected cascading behavior.

Steps to reproduce:

1. use somewhere md_W100p ( e.g., hero-section) in one template with layout;
2. somewhere in the different template (e.g., the template for the footer) use the following utilities: sm_W60p md_W100p;
3. you may see that in the style.min.css minified css-file there is a wrong order of at-rules that breaks the behaviour of the layout.

Here are the examples illustrating the described behaviour:

<!-- In the hero-section -->
<img class="D Mxw480 W80p md_W100p" >
<!-- In the footer -->
<div class="W100p sm_W60p md_W100p C-$gray200 D-f Fld-r Flw-w Jc-c md_P0;8u">
    ...
</div>

In style.min.css, the .md_W100p class appears before .sm_W60p, which violates the expected cascade order and breaks responsive behavior