1 files changed, 11 insertions, 7 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);
             }
         }