Two dimensional fix

7 files changed, 87 insertions, 75 deletions

diff --git a/less.less b/less.less
index 2ffbc78..7932686 100644
--- a/less.less
+++ b/less.less
@@ -152,7 +152,7 @@
 ._rfs-render-media-query () {
   & when (@rfs-two-dimensional) {
     & when (@rfs-mode = "min-media-query") {
-      @media (min-width: @max-width), (min-height: @max-width) {
+      @media (min-width: @max-width) and (min-height: @max-width) {
         @{property}: @valueResult;
       }
     }
diff --git a/lib/rfs.js b/lib/rfs.js
index ae38024..f51c917 100644
--- a/lib/rfs.js
+++ b/lib/rfs.js
@@ -145,10 +145,11 @@ module.exports = class {
     };
 
     const dimPrefix = (this.opts.mode === 'min-media-query') ? 'min' : 'max';
+    const dimConnector = (this.opts.mode === 'min-media-query') ? ' and' : ',';
     const breakpoint = (this.opts.breakpointUnit === 'px') ? this.opts.breakpoint : this.opts.breakpoint / this.opts.remValue;
 
     if (this.opts.twoDimensional) {
-      mediaQuery.params = `(${dimPrefix}-width: ${breakpoint}${this.opts.breakpointUnit}), (${dimPrefix}-height: ${breakpoint}${this.opts.breakpointUnit})`;
+      mediaQuery.params = `(${dimPrefix}-width: ${breakpoint}${this.opts.breakpointUnit})${dimConnector} (${dimPrefix}-height: ${breakpoint}${this.opts.breakpointUnit})`;
     } else {
       mediaQuery.params = `(${dimPrefix}-width: ${breakpoint}${this.opts.breakpointUnit})`;
     }
diff --git a/scss.scss b/scss.scss
index a68e738..798753e 100644
--- a/scss.scss
+++ b/scss.scss
@@ -79,8 +79,15 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
 // Internal mixin used to determine which media query needs to be used
 @mixin _rfs-media-query {
   @if $rfs-two-dimensional {
-    @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}), (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {
-      @content;
+    @if $rfs-mode == max-media-query {
+      @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}), (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {
+        @content;
+      }
+    }
+    @else {
+      @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) and (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {
+        @content;
+      }
     }
   }
   @else {
diff --git a/stylus.styl b/stylus.styl
index 40f5bb4..44fc9a6 100644
--- a/stylus.styl
+++ b/stylus.styl
@@ -101,8 +101,12 @@ _rfs-media-query-rule()
 // Internal mixin used to determine which media query needs to be used
 _rfs-media-query()
   if $rfs-two-dimensional
-    @media ({$rfs-mq-property-width}: $rfs-mq-value), ({$rfs-mq-property-height}: $rfs-mq-value)
-      {block}
+    if $rfs-mode == min-media-query
+      @media ({$rfs-mq-property-width}: $rfs-mq-value) and ({$rfs-mq-property-height}: $rfs-mq-value)
+        {block}
+    else
+      @media ({$rfs-mq-property-width}: $rfs-mq-value), ({$rfs-mq-property-height}: $rfs-mq-value)
+        {block}
   else
     @media ({$rfs-mq-property-width}: $rfs-mq-value)
       {block}
diff --git a/test/expected/test-10.css b/test/expected/test-10.css
index 9998292..7286288 100644
--- a/test/expected/test-10.css
+++ b/test/expected/test-10.css
@@ -4,7 +4,7 @@
   font-size: calc(16px + 2vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-1 {
     font-size: 32px;
   }
@@ -14,7 +14,7 @@
   font-size: calc(16px + 2vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-2 {
     font-size: 32px;
   }
@@ -24,7 +24,7 @@
   font-size: calc(16px + 2vmin) !important;
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-3 {
     font-size: 32px !important;
   }
@@ -34,7 +34,7 @@
   font-size: calc(16px + 2vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-4 {
     font-size: 32px;
   }
@@ -53,7 +53,7 @@
     font-size: calc(15.2px + 1.6vmin);
     min-width: 0vw;
   }
-  @media (min-width: 50rem), (min-height: 50rem) {
+  @media (min-width: 50rem) and (min-height: 50rem) {
     .selector-7 {
       font-size: 28px;
     }
@@ -64,7 +64,7 @@
   flex: 0 999 calc(112px + 50vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-8 {
     flex: 0 999 512px;
   }
@@ -74,7 +74,7 @@
   padding: calc(16px + 2vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-9 {
     padding: 32px;
   }
@@ -84,7 +84,7 @@
   padding: calc(16px + 2vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-10 {
     padding: 32px;
   }
@@ -94,7 +94,7 @@
   padding-top: calc(16px + 2vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-11 {
     padding-top: 32px;
   }
@@ -104,7 +104,7 @@
   padding-right: calc(16px + 2vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-12 {
     padding-right: 32px;
   }
@@ -114,7 +114,7 @@
   padding-bottom: calc(16px + 2vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-13 {
     padding-bottom: 32px;
   }
@@ -124,7 +124,7 @@
   padding-left: calc(16px + 2vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-14 {
     padding-left: 32px;
   }
@@ -134,7 +134,7 @@
   margin: calc(16px + 2vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-15 {
     margin: 32px;
   }
@@ -144,7 +144,7 @@
   margin-top: calc(16px + 2vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-16 {
     margin-top: 32px;
   }
@@ -154,7 +154,7 @@
   margin-right: calc(16px + 2vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-17 {
     margin-right: 32px;
   }
@@ -164,7 +164,7 @@
   margin-bottom: calc(16px + 2vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-18 {
     margin-bottom: 32px;
   }
@@ -174,7 +174,7 @@
   margin-left: calc(16px + 2vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-19 {
     margin-left: 32px;
   }
@@ -184,7 +184,7 @@
   margin: calc(16px + 2vmin) calc(19.2px + 3.6vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-20 {
     margin: 32px 48px;
   }
@@ -194,7 +194,7 @@
   margin: calc(16px + 2vmin) calc(19.2px + 3.6vmin) !important;
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-21 {
     margin: 32px 48px !important;
   }
@@ -208,7 +208,7 @@
   margin: 0 calc(19.2px + 3.6vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-23 {
     margin: 0 48px;
   }
@@ -218,7 +218,7 @@
   box-shadow: 0 0 calc(16px + 2vmin) #f00, 0 0 calc(19.2px + 3.6vmin) #0f0;
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-24 {
     box-shadow: 0 0 32px #f00, 0 0 48px #0f0;
   }
@@ -228,7 +228,7 @@
   --value: calc(19.2px + 3.6vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-25 {
     --value: 48px;
   }
@@ -242,7 +242,7 @@
   margin: calc(-19.2px - 3.6vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-27 {
     margin: -48px;
   }
diff --git a/test/expected/test-8.css b/test/expected/test-8.css
index 88ddfe2..c802713 100644
--- a/test/expected/test-8.css
+++ b/test/expected/test-8.css
@@ -3,7 +3,7 @@
   width: 300px;
   font-size: calc(1.325rem + 0.9vmin);
 }
-@media (min-width: 1200px), (min-height: 1200px) {
+@media (min-width: 1200px) and (min-height: 1200px) {
   .selector-1 {
     font-size: 2rem;
   }
@@ -12,7 +12,7 @@
 .selector-2 {
   font-size: calc(1.325rem + 0.9vmin);
 }
-@media (min-width: 1200px), (min-height: 1200px) {
+@media (min-width: 1200px) and (min-height: 1200px) {
   .selector-2 {
     font-size: 2rem;
   }
@@ -21,7 +21,7 @@
 .selector-3 {
   font-size: calc(1.325rem + 0.9vmin) !important;
 }
-@media (min-width: 1200px), (min-height: 1200px) {
+@media (min-width: 1200px) and (min-height: 1200px) {
   .selector-3 {
     font-size: 2rem !important;
   }
@@ -30,7 +30,7 @@
 .selector-4 {
   font-size: calc(1.325rem + 0.9vmin);
 }
-@media (min-width: 1200px), (min-height: 1200px) {
+@media (min-width: 1200px) and (min-height: 1200px) {
   .selector-4 {
     font-size: 2rem;
   }
@@ -48,7 +48,7 @@
   .selector-7 {
     font-size: calc(1.3rem + 0.6vmin);
   }
-  @media (min-width: 1200px), (min-height: 1200px) {
+  @media (min-width: 1200px) and (min-height: 1200px) {
     .selector-7 {
       font-size: 1.75rem;
     }
@@ -58,7 +58,7 @@
 .selector-8 {
   flex: 0 999 calc(4.325rem + 36.9vmin);
 }
-@media (min-width: 1200px), (min-height: 1200px) {
+@media (min-width: 1200px) and (min-height: 1200px) {
   .selector-8 {
     flex: 0 999 32rem;
   }
@@ -67,7 +67,7 @@
 .selector-9 {
   padding: calc(1.325rem + 0.9vmin);
 }
-@media (min-width: 1200px), (min-height: 1200px) {
+@media (min-width: 1200px) and (min-height: 1200px) {
   .selector-9 {
     padding: 2rem;
   }
@@ -76,7 +76,7 @@
 .selector-10 {
   padding: calc(1.325rem + 0.9vmin);
 }
-@media (min-width: 1200px), (min-height: 1200px) {
+@media (min-width: 1200px) and (min-height: 1200px) {
   .selector-10 {
     padding: 2rem;
   }
@@ -85,7 +85,7 @@
 .selector-11 {
   padding-top: calc(1.325rem + 0.9vmin);
 }
-@media (min-width: 1200px), (min-height: 1200px) {
+@media (min-width: 1200px) and (min-height: 1200px) {
   .selector-11 {
     padding-top: 2rem;
   }
@@ -94,7 +94,7 @@
 .selector-12 {
   padding-right: calc(1.325rem + 0.9vmin);
 }
-@media (min-width: 1200px), (min-height: 1200px) {
+@media (min-width: 1200px) and (min-height: 1200px) {
   .selector-12 {
     padding-right: 2rem;
   }
@@ -103,7 +103,7 @@
 .selector-13 {
   padding-bottom: calc(1.325rem + 0.9vmin);
 }
-@media (min-width: 1200px), (min-height: 1200px) {
+@media (min-width: 1200px) and (min-height: 1200px) {
   .selector-13 {
     padding-bottom: 2rem;
   }
@@ -112,7 +112,7 @@
 .selector-14 {
   padding-left: calc(1.325rem + 0.9vmin);
 }
-@media (min-width: 1200px), (min-height: 1200px) {
+@media (min-width: 1200px) and (min-height: 1200px) {
   .selector-14 {
     padding-left: 2rem;
   }
@@ -121,7 +121,7 @@
 .selector-15 {
   margin: calc(1.325rem + 0.9vmin);
 }
-@media (min-width: 1200px), (min-height: 1200px) {
+@media (min-width: 1200px) and (min-height: 1200px) {
   .selector-15 {
     margin: 2rem;
   }
@@ -130,7 +130,7 @@
 .selector-16 {
   margin-top: calc(1.325rem + 0.9vmin);
 }
-@media (min-width: 1200px), (min-height: 1200px) {
+@media (min-width: 1200px) and (min-height: 1200px) {
   .selector-16 {
     margin-top: 2rem;
   }
@@ -139,7 +139,7 @@
 .selector-17 {
   margin-right: calc(1.325rem + 0.9vmin);
 }
-@media (min-width: 1200px), (min-height: 1200px) {
+@media (min-width: 1200px) and (min-height: 1200px) {
   .selector-17 {
     margin-right: 2rem;
   }
@@ -148,7 +148,7 @@
 .selector-18 {
   margin-bottom: calc(1.325rem + 0.9vmin);
 }
-@media (min-width: 1200px), (min-height: 1200px) {
+@media (min-width: 1200px) and (min-height: 1200px) {
   .selector-18 {
     margin-bottom: 2rem;
   }
@@ -157,7 +157,7 @@
 .selector-19 {
   margin-left: calc(1.325rem + 0.9vmin);
 }
-@media (min-width: 1200px), (min-height: 1200px) {
+@media (min-width: 1200px) and (min-height: 1200px) {
   .selector-19 {
     margin-left: 2rem;
   }
@@ -166,7 +166,7 @@
 .selector-20 {
   margin: calc(1.325rem + 0.9vmin) calc(1.425rem + 2.1vmin);
 }
-@media (min-width: 1200px), (min-height: 1200px) {
+@media (min-width: 1200px) and (min-height: 1200px) {
   .selector-20 {
     margin: 2rem 3rem;
   }
@@ -175,7 +175,7 @@
 .selector-21 {
   margin: calc(1.325rem + 0.9vmin) calc(1.425rem + 2.1vmin) !important;
 }
-@media (min-width: 1200px), (min-height: 1200px) {
+@media (min-width: 1200px) and (min-height: 1200px) {
   .selector-21 {
     margin: 2rem 3rem !important;
   }
@@ -188,7 +188,7 @@
 .selector-23 {
   margin: 0 calc(1.425rem + 2.1vmin);
 }
-@media (min-width: 1200px), (min-height: 1200px) {
+@media (min-width: 1200px) and (min-height: 1200px) {
   .selector-23 {
     margin: 0 3rem;
   }
@@ -198,7 +198,7 @@
   box-shadow: 0 0 calc(1.325rem + 0.9vmin) #f00,
     0 0 calc(1.425rem + 2.1vmin) #0f0;
 }
-@media (min-width: 1200px), (min-height: 1200px) {
+@media (min-width: 1200px) and (min-height: 1200px) {
   .selector-24 {
     box-shadow: 0 0 2rem #f00, 0 0 3rem #0f0;
   }
@@ -207,7 +207,7 @@
 .selector-25 {
   --value: calc(1.425rem + 2.1vmin);
 }
-@media (min-width: 1200px), (min-height: 1200px) {
+@media (min-width: 1200px) and (min-height: 1200px) {
   .selector-25 {
     --value: 3rem;
   }
@@ -220,7 +220,7 @@
 .selector-27 {
   margin: calc(-1.425rem - 2.1vmin);
 }
-@media (min-width: 1200px), (min-height: 1200px) {
+@media (min-width: 1200px) and (min-height: 1200px) {
   .selector-27 {
     margin: -3rem;
   }
diff --git a/test/expected/test-9.css b/test/expected/test-9.css
index 9998292..7286288 100644
--- a/test/expected/test-9.css
+++ b/test/expected/test-9.css
@@ -4,7 +4,7 @@
   font-size: calc(16px + 2vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-1 {
     font-size: 32px;
   }
@@ -14,7 +14,7 @@
   font-size: calc(16px + 2vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-2 {
     font-size: 32px;
   }
@@ -24,7 +24,7 @@
   font-size: calc(16px + 2vmin) !important;
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-3 {
     font-size: 32px !important;
   }
@@ -34,7 +34,7 @@
   font-size: calc(16px + 2vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-4 {
     font-size: 32px;
   }
@@ -53,7 +53,7 @@
     font-size: calc(15.2px + 1.6vmin);
     min-width: 0vw;
   }
-  @media (min-width: 50rem), (min-height: 50rem) {
+  @media (min-width: 50rem) and (min-height: 50rem) {
     .selector-7 {
       font-size: 28px;
     }
@@ -64,7 +64,7 @@
   flex: 0 999 calc(112px + 50vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-8 {
     flex: 0 999 512px;
   }
@@ -74,7 +74,7 @@
   padding: calc(16px + 2vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-9 {
     padding: 32px;
   }
@@ -84,7 +84,7 @@
   padding: calc(16px + 2vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-10 {
     padding: 32px;
   }
@@ -94,7 +94,7 @@
   padding-top: calc(16px + 2vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-11 {
     padding-top: 32px;
   }
@@ -104,7 +104,7 @@
   padding-right: calc(16px + 2vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-12 {
     padding-right: 32px;
   }
@@ -114,7 +114,7 @@
   padding-bottom: calc(16px + 2vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-13 {
     padding-bottom: 32px;
   }
@@ -124,7 +124,7 @@
   padding-left: calc(16px + 2vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-14 {
     padding-left: 32px;
   }
@@ -134,7 +134,7 @@
   margin: calc(16px + 2vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-15 {
     margin: 32px;
   }
@@ -144,7 +144,7 @@
   margin-top: calc(16px + 2vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-16 {
     margin-top: 32px;
   }
@@ -154,7 +154,7 @@
   margin-right: calc(16px + 2vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-17 {
     margin-right: 32px;
   }
@@ -164,7 +164,7 @@
   margin-bottom: calc(16px + 2vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-18 {
     margin-bottom: 32px;
   }
@@ -174,7 +174,7 @@
   margin-left: calc(16px + 2vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-19 {
     margin-left: 32px;
   }
@@ -184,7 +184,7 @@
   margin: calc(16px + 2vmin) calc(19.2px + 3.6vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-20 {
     margin: 32px 48px;
   }
@@ -194,7 +194,7 @@
   margin: calc(16px + 2vmin) calc(19.2px + 3.6vmin) !important;
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-21 {
     margin: 32px 48px !important;
   }
@@ -208,7 +208,7 @@
   margin: 0 calc(19.2px + 3.6vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-23 {
     margin: 0 48px;
   }
@@ -218,7 +218,7 @@
   box-shadow: 0 0 calc(16px + 2vmin) #f00, 0 0 calc(19.2px + 3.6vmin) #0f0;
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-24 {
     box-shadow: 0 0 32px #f00, 0 0 48px #0f0;
   }
@@ -228,7 +228,7 @@
   --value: calc(19.2px + 3.6vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-25 {
     --value: 48px;
   }
@@ -242,7 +242,7 @@
   margin: calc(-19.2px - 3.6vmin);
   min-width: 0vw;
 }
-@media (min-width: 50rem), (min-height: 50rem) {
+@media (min-width: 50rem) and (min-height: 50rem) {
   .selector-27 {
     margin: -48px;
   }