Improved appearance of related content

3 files changed, 23 insertions, 6 deletions

diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 1bd60de..ca23bf4 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -27,8 +27,10 @@
     ), 'colors');
 
     @include iro.bem-component(iro.props-namespace()) {
-        display:          block;
+        display:          flex;
         position:         relative;
+        flex-direction:   column;
+        justify-content:  center;
         transform:        translateY(0);
         transition:       transform .2s, background-color .2s, color .2s, border-color .2s;
         background-color: fn.color(--bg);
diff --git a/assets/css/layouts/_card-list.scss b/assets/css/layouts/_card-list.scss
index b532cc1..d8e67ee 100644
--- a/assets/css/layouts/_card-list.scss
+++ b/assets/css/layouts/_card-list.scss
@@ -52,7 +52,6 @@
             @each $mode in 'grid-2' 'grid-3' 'gallery-2' 'gallery-3' {
                 @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/templates/partials/related.html b/templates/partials/related.html
index b6e2169..4c8384a 100644
--- a/templates/partials/related.html
+++ b/templates/partials/related.html
@@ -14,11 +14,27 @@ $if(related)$
             </header>
             <div class="l-card-list__cards l-card-list__cards--$related.layout.id$">
                 $if(related.layout.is_grid-2)$
-                    $related.prev:partials/grid_card()$
-                    $related.next:partials/grid_card()$
+                    $if(related.prev)$
+                        $related.prev:partials/grid_card()$
+                    $else$
+                    <div class="l-card-list__card c-card c-card--outline"></div>
+                    $endif$
+                    $if(related.next)$
+                        $related.next:partials/grid_card()$
+                    $else$
+                        <div class="l-card-list__card c-card c-card--outline"></div>
+                    $endif$
                 $else$
-                    $related.prev:partials/gallery_card()$
-                    $related.next:partials/gallery_card()$
+                    $if(related.prev)$
+                        $related.prev:partials/gallery_card()$
+                    $else$
+                    <div class="l-card-list__card c-card c-card--outline"></div>
+                    $endif$
+                    $if(related.next)$
+                        $related.next:partials/gallery_card()$
+                    $else$
+                    <div class="l-card-list__card c-card c-card--outline"></div>
+                    $endif$
                 $endif$
             </div>
         </div>