2 files changed, 51 insertions, 1 deletions

diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index 8ef40c5..b828e44 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -6,6 +6,7 @@
 
 @forward 'card-list.vars';
 @use 'card-list.vars' as vars;
+@use '../objects/card.vars' as card;
 
 @mixin styles {
     @include materialize-at-root(meta.module-variables('vars'));
@@ -15,6 +16,33 @@
         flex-direction: column;
         gap:            props.get(vars.$row-gap);
 
+        @include bem.modifier('merge') {
+            position:   relative;
+            gap:        0;
+
+            @include bem.elem('card') {
+                transition: none;
+
+                &:not(:last-child) {
+                    margin-bottom:           calc(-1 * props.get(card.$border-width));
+                    border-end-start-radius: 0;
+                    border-end-end-radius:   0;
+                }
+
+                &:hover,
+                &:active,
+                &:focus-visible {
+                    z-index:    10;
+                    transform:  none;
+                }
+
+                @include bem.next-twin-elem {
+                    border-start-start-radius: 0;
+                    border-start-end-radius:   0;
+                }
+            }
+        }
+
         @include bem.modifier('quiet') {
             row-gap: props.get(vars.$quiet--row-gap);
         }
@@ -29,6 +57,23 @@
             }
         }
 
+        @include bem.modifier('grid-sm') {
+            display:               grid;
+            grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid-sm--col-width), 1fr));
+            gap:                   props.get(vars.$grid-sm--row-gap) props.get(vars.$grid-sm--col-gap);
+
+            @include bem.modifier("grid-sm") {
+                @include media.media("<=md") {
+                    display: flex;
+                    gap:     props.get(vars.$row-gap);
+                }
+            }
+
+            @include bem.modifier('quiet') {
+                row-gap: props.get(vars.$grid-sm--quiet--row-gap);
+            }
+        }
+
         @include bem.modifier('masonry') {
             display:    block;
             columns:    auto props.get(vars.$masonry--col-width);
diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss
index f77bfbf..1c49c0f 100644
--- a/src/layouts/_card-list.vars.scss
+++ b/src/layouts/_card-list.vars.scss
@@ -1,7 +1,7 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
 
-$row-gap:        props.def(--l-card-list--row-gap, props.get(core.$size--200)) !default;
+$row-gap:        props.def(--l-card-list--row-gap, props.get(core.$size--100)) !default;
 $quiet--row-gap: props.def(--l-card-list--quiet--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;
@@ -9,6 +9,11 @@ $grid--col-gap:        props.def(--l-card-list--grid--col-gap, props.get(core.$s
 $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--quiet--row-gap, props.get(core.$size--800)) !default;
 
+$grid-sm--row-gap:        props.def(--l-card-list--grid-md--row-gap, props.get(core.$size--150)) !default;
+$grid-sm--col-gap:        props.def(--l-card-list--grid-md--col-gap, props.get(core.$size--150)) !default;
+$grid-sm--col-width:      props.def(--l-card-list--grid-md--col-width, props.get(core.$size--4600)) !default;
+$grid-sm--quiet--row-gap: props.def(--l-card-list--grid-sm--quiet--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;