Fix responsive width/height utilities overriding order #6840

[Timo-Breumelhof]

Summary

Fix responsive width/height utilities overriding in wrong breakpoint order

Fixes #6840: combining classes like aperture-w-xs-100 and aperture-w-md-50 didn't respond to breakpoints as expected — the pane stayed full-width instead of switching to 50% at md.

Root cause: in _dimension.scss's responsive-dimension mixin, the loop was nested size-outer/breakpoint-inner, so the compiled CSS was grouped by percentage value rather than by breakpoint (all .aperture-w--100 rules together, then all .aperture-w--75 rules, etc.). Since every responsive variant uses !important with equal specificity, ties are broken by source order — so a smaller breakpoint at a larger percentage could end up declared after a larger breakpoint at a smaller percentage, letting it win when both media queries matched simultaneously.

Fix: swap the loop nesting to breakpoint-outer/size-inner, so each breakpoint's @media block contains all size variants together, and breakpoints are guaranteed to appear in ascending order in the stylesheet. This also collapses the previous 5 sizes × 5 breakpoints = 25 separate @media blocks down to 5.

Test case (add to a skin page to verify — panes should stack full-width below md and sit side-by-side at md+):

<!-- Main Content -->
<main class="aperture-main">
<h1>Aperture-Custom-Test</h1>
  <div id="BannerPane" runat="server"></div>
  <div id="ContentPane" class="aperture-content-pane" runat="server"></div> 
  <div id="FluidPane" runat="server"></div>
	<div class="aperture-d-flex aperture-flex-wrap">
		<div id="LeftPane50" class="pane-left aperture-w-xs-100 aperture-w-md-50" runat="server"></div> 
		<div id="RightPane50" class="pane-right aperture-w-xs-100 aperture-w-md-50" runat="server"></div> 
	</div>
</main>

fixes #6840