Style fix for card list 'list' layout gap on <=sm

3 files changed, 7 insertions, 2 deletions

diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index 2d8818f..cdf3a90 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -73,7 +73,7 @@
             height: fn.dim(--icon);
         }
 
-        @include media.media('>=lg') {
+        @include media.media('>lg') {
             position: fixed;
         }
 
diff --git a/assets/css/components/_main.scss b/assets/css/components/_main.scss
index 3a64e9b..447ce56 100644
--- a/assets/css/components/_main.scss
+++ b/assets/css/components/_main.scss
@@ -12,7 +12,7 @@
     @include iro.bem-component(iro.props-namespace()) {
         margin-top: fn.dim(--pad-top);
 
-        @include media.media('>=lg') {
+        @include media.media('>lg') {
             margin-top: calc(.25 * fn.dim(--pad-top));
         }
     }
diff --git a/assets/css/layouts/_card-list.scss b/assets/css/layouts/_card-list.scss
index 0c06adc..b532cc1 100644
--- a/assets/css/layouts/_card-list.scss
+++ b/assets/css/layouts/_card-list.scss
@@ -1,5 +1,6 @@
 @use 'iro-sass/src/index' as iro;
 @use 'iro-design/src/functions' as fn;
+@use 'include-media/dist/include-media' as media;
 
 @include iro.props-namespace('card-list') {
     @include iro.props-store((
@@ -44,6 +45,10 @@
             gap:            fn.dim(--gap);
             margin-top:     fn.dim(--spacing);
 
+            @include media.media('<=sm') {
+                gap: fn.dim(--grid-2 --gap);
+            }
+
             @each $mode in 'grid-2' 'grid-3' 'gallery-2' 'gallery-3' {
                 @include iro.bem-modifier($mode) {
                     display:               grid;