Update card

2 files changed, 19 insertions, 12 deletions

diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index 59105c4..0722a88 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -13,15 +13,19 @@
     @include iro.bem-layout('card-list') {
         display:        flex;
         flex-direction: column;
-        gap:            props.get(vars.$row-gap) props.get(vars.$col-gap);
+        gap:            props.get(vars.$row-gap);
+
+        @include iro.bem-modifier('quiet') {
+            row-gap: props.get(vars.$quiet--row-gap);
+        }
 
         @include iro.bem-modifier('grid') {
             display:               grid;
             grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid--col-width), 1fr));
-            gap:                   props.get(vars.$grid--col-gap);
+            gap:                   props.get(vars.$grid--row-gap) props.get(vars.$grid--col-gap);
 
             @include iro.bem-modifier('quiet') {
-                row-gap: props.get(vars.$grid--row-gap);
+                row-gap: props.get(vars.$grid--quiet--row-gap);
             }
         }
 
@@ -31,20 +35,20 @@
             column-gap: props.get(vars.$masonry--col-gap);
 
             @include iro.bem-elem('card') {
-                margin-block-end: props.get(vars.$masonry--col-gap);
+                margin-block-end: props.get(vars.$masonry--row-gap);
                 break-inside:     avoid;
             }
 
             @include iro.bem-modifier('quiet') {
                 @include iro.bem-elem('card') {
-                    margin-block-end: props.get(vars.$masonry--row-gap);
+                    margin-block-end: props.get(vars.$masonry--quiet--row-gap);
                 }
             }
         }
 
         @include iro.bem-modifier('masonry-h') {
             flex-flow: row wrap;
-            gap:       props.get(vars.$masonry-h--col-gap);
+            gap:       props.get(vars.$masonry-h--row-gap) props.get(vars.$masonry-h--col-gap);
 
             @include iro.bem-modifier('no-flush') {
                 &::after {
@@ -65,7 +69,7 @@
             }
 
             @include iro.bem-modifier('quiet') {
-                row-gap: props.get(vars.$masonry-h--row-gap);
+                row-gap: props.get(vars.$masonry-h--quiet--row-gap);
             }
         }
 
diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss
index c2df3ef..7d19e07 100644
--- a/src/layouts/_card-list.vars.scss
+++ b/src/layouts/_card-list.vars.scss
@@ -1,19 +1,22 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
 
-$row-gap: props.def(--l-card-list--row-gap, props.get(core.$size--800)) !default;
-$col-gap: props.def(--l-card-list--col-gap, props.get(core.$size--400)) !default;
+$row-gap: props.def(--l-card-list--row-gap, props.get(core.$size--200)) !default;
+$quiet--row-gap:   props.def(--l-card-list--grid--row-gap, props.get(core.$size--800)) !default;
 
-$grid--row-gap:   props.def(--l-card-list--grid--row-gap, props.get(core.$size--800)) !default;
+$grid--row-gap:   props.def(--l-card-list--grid--row-gap, props.get(core.$size--400)) !default;
 $grid--col-gap:   props.def(--l-card-list--grid--col-gap, props.get(core.$size--400)) !default;
 $grid--col-width: props.def(--l-card-list--grid--col-width, props.get(core.$size--3200)) !default;
+$grid--quiet--row-gap:   props.def(--l-card-list--grid--row-gap, props.get(core.$size--800)) !default;
 
-$masonry--row-gap:   props.def(--l-card-list--masonry--row-gap, props.get(core.$size--800)) !default;
+$masonry--row-gap:   props.def(--l-card-list--masonry--row-gap, props.get(core.$size--400)) !default;
 $masonry--col-gap:   props.def(--l-card-list--masonry--col-gap, props.get(core.$size--400)) !default;
 $masonry--col-width: props.def(--l-card-list--masonry--col-width, props.get(core.$size--3200)) !default;
+$masonry--quiet--row-gap:   props.def(--l-card-list--masonry--row-gap, props.get(core.$size--800)) !default;
 
-$masonry-h--row-gap:    props.def(--l-card-list--masonry-h--row-gap, props.get(core.$size--800)) !default;
+$masonry-h--row-gap:    props.def(--l-card-list--masonry-h--row-gap, props.get(core.$size--400)) !default;
 $masonry-h--col-gap:    props.def(--l-card-list--masonry-h--col-gap, props.get(core.$size--400)) !default;
 $masonry-h--row-height: props.def(--l-card-list--masonry-h--row-height, props.get(core.$size--3200)) !default;
+$masonry-h--quiet--row-gap:    props.def(--l-card-list--masonry-h--row-gap, props.get(core.$size--800)) !default;
 
 $border-color: props.def(--l-card-list--border-color, props.get(core.$theme, --border)) !default;