Update

1 files changed, 23 insertions, 8 deletions

diff --git a/tpl/views/card.pug b/tpl/views/card.pug
index e466cdc..4871d30 100644
--- a/tpl/views/card.pug
+++ b/tpl/views/card.pug
@@ -1,5 +1,5 @@
 mixin view-card 
-    +view('card', 'Card')
+    +view('card', 'Card')(wide=true)
         .c-box(style={ display: 'flex', 'flex-direction': 'column', gap: '2em' })
             +card(href='#')
                 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })
@@ -44,11 +44,26 @@ mixin view-card
                         p= loremIpsum
                         p= loremIpsum
 
-        +divider('faint')
+        each layout in ['grid', 'masonry', 'masonry-h']
+            -
+                let quiet = true
 
-        .l-card-list.l-card-list--masonry
-            each img in ['Drawing_Half.png', '0000 Cover@0.5x.webp', 'avatar.png', '01 Design Cody.png', 'avatar.png', 'Drawing_Half.png']
-                +card(href='#' class='l-card-list__card')
-                    +card-image(src=img)
-                    +card-body
-                        +card-title= 'XS Heading'
+                let classes = {
+                    'l-card-list': true,
+                    'l-card-list--aspect-5/4': layout === 'grid',
+                    'l-card-list--quiet': quiet,
+                }
+                classes[`l-card-list--${layout}`] = true;
+
+
+            +divider('faint')(class='u-mb-700')
+
+            div(class=classes)
+                each img, i in ['Drawing_Half.png', '0000 Cover@0.5x.webp', 'avatar.png', '01 Design Cody.png', 'avatar.png', 'Drawing_Half.png']
+                    +card(quiet=quiet href='#' class='l-card-list__card')
+                        +card-image(src=img class='l-card-list__card-image')
+                        +card-body
+                            .l-media
+                                .l-media__block.l-media__block--main
+                                    h1.u-mbs-0= 'XS Heading'
+                                    small.u-c-mute-more= `Episode ${i + 1}`