Update card

3 files changed, 37 insertions, 13 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;
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 0be38c9..3126775 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -77,7 +77,8 @@
         }
 
         @include iro.bem-elem('body') {
-            flex:            1 0 auto;
+            flex:            0 1 auto;
+            block-size:      100%;
             padding-block:   props.get(vars.$pad-b);
             padding-inline:  props.get(vars.$pad-i);
 
@@ -181,5 +182,21 @@
                 padding-inline: 0;
             }
         }
+
+        @include fw.bem-modifier('horizontal') {
+            flex-direction: row;
+            align-items:    center;
+
+            @include iro.bem-elem('body') {
+                flex:       0 0 auto;
+                block-size: auto;
+
+                @include iro.bem-modifier('main') {
+                    flex-shrink:     1;
+                    inline-size:     100%;
+                    min-inline-size: 0;
+                }
+            }
+        }
     }
 }