2 files changed, 36 insertions, 14 deletions

diff --git a/assets/css/layouts/_card-list.scss b/assets/css/layouts/_card-list.scss
index 96f9060..6d388e6 100644
--- a/assets/css/layouts/_card-list.scss
+++ b/assets/css/layouts/_card-list.scss
@@ -6,7 +6,19 @@
         --dims: (
             --margin-top: fn.global-dim(--size --600),
             --spacing:    fn.global-dim(--size --200),
-            --col-width:  17em,
+            --gap:        fn.global-dim(--size --25),
+            --grid: (
+                --gap:       fn.global-dim(--size --75),
+                --col-width: fn.global-dim(--size --3400),
+            ),
+            --small-gallery: (
+                --gap:       fn.global-dim(--size --250),
+                --col-width: fn.global-dim(--size --2800),
+            ),
+            --gallery: (
+                --gap:       fn.global-dim(--size --250),
+                --col-width: fn.global-dim(--size --3400),
+            )
         )
     ), 'dims');
 
@@ -14,24 +26,23 @@
         margin-top: fn.dim(--margin-top);
         font-size:  1rem;
 
+        @include iro.bem-elem('header') {
+            margin-top: fn.dim(--margin-top);
+        }
+
         @include iro.bem-elem('cards') {
             display:        flex;
             flex-direction: column;
-            gap:            2px;
+            gap:            fn.dim(--gap);
             margin-top:     fn.dim(--spacing);
 
-            @include iro.bem-modifier('grid', 'gallery') {
-                display:               grid;
-                grid-template-columns: repeat(auto-fill, minmax(fn.dim(--col-width), 1fr));
-                align-items:           start;
-            }
-
-            @include iro.bem-modifier('grid') {
-                gap: 6px;
-            }
-
-            @include iro.bem-modifier('gallery') {
-                gap: 20px;
+            @each $mode in 'grid' 'small-gallery' 'gallery' {
+                @include iro.bem-modifier($mode) {
+                    display:               grid;
+                    align-items:           start;
+                    grid-template-columns: repeat(auto-fill, minmax(fn.dim('--#{$mode}' --col-width), 1fr));
+                    gap:                   fn.dim('--#{$mode}' --gap);
+                }
             }
         }
     }
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
new file mode 100644
index 0000000..10d6832
--- /dev/null
+++ b/assets/css/layouts/_container.scss
@@ -0,0 +1,11 @@
+@use 'iro-sass/src/index' as iro;
+@use 'iro-design/src/functions' as fn;
+
+@include iro.props-namespace('container') {
+    @include iro.props-store((
+        --dims: (
+            --width:    iro.fn-px-to-rem(730px),
+            --width-50: iro.fn-px-to-rem(380px),
+        )
+    ), 'dims');
+}