6 files changed, 48 insertions, 26 deletions

diff --git a/assets/css/_base.scss b/assets/css/_base.scss
index dd24fed..ac6b989 100644
--- a/assets/css/_base.scss
+++ b/assets/css/_base.scss
@@ -9,6 +9,7 @@ code {
 
 body {
     box-sizing: border-box;
+    height:     auto;
     min-height: 100%;
 }
 
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index f8f106d..6c15145 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -135,7 +135,7 @@
             position:    relative;
             width:       100%;
             height:      2em;
-            padding-top: 46%;
+            padding-top: 50%;
         }
 
         @include iro.bem-elem('thumbnail-img') {
diff --git a/assets/css/components/_hnav.scss b/assets/css/components/_hnav.scss
index 4097373..6eea345 100644
--- a/assets/css/components/_hnav.scss
+++ b/assets/css/components/_hnav.scss
@@ -10,20 +10,18 @@
 
     @include iro.props-store((
         --dims: (
-            --margin-top: fn.global-dim(--size --600),
-            --gap:        2em,
-            --pad-y:      .5em
+            --gap: 1.5em,
+            --margin-top:    fn.global-dim(--paragraph --margin-top),
+            --margin-bottom: fn.global-dim(--size --900),
         )
     ), 'dims');
 
     @include iro.bem-component(iro.props-namespace()) {
-        display:      flex;
-        gap:          fn.dim(--gap);
-        align-items:  baseline;
-        margin-top:   fn.dim(--margin-top);
-        padding:      fn.dim(--pad-y) 0 0;
-        border-width: 1px 0 0;
-        border-style: solid;
-        border-color: fn.color(--border);
+        display:       flex;
+        gap:           fn.dim(--gap);
+        align-items:   baseline;
+        margin:        fn.dim(--margin-top) 0 fn.dim(--margin-bottom);
+        padding-top:   fn.dim(--margin-top);
+        border-top:    1px solid fn.color(--border);
     }
 }
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');
+}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 1184bb2..e160f91 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -7,6 +7,7 @@
 @use 'base';
 
 @use 'iro-design/src/layouts';
+@use 'layouts/container';
 @use 'layouts/media';
 @use 'layouts/card-list';