2 files changed, 39 insertions, 12 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}`
diff --git a/tpl/views/lightbox.pug b/tpl/views/lightbox.pug
index 8169a35..4eb234a 100644
--- a/tpl/views/lightbox.pug
+++ b/tpl/views/lightbox.pug
@@ -1,8 +1,20 @@
 mixin view-lightbox 
     +view('lightbox', 'Lightbox')
         .c-box
-            +backdrop(class='t-media')
-                +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])
+            +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])
+                = "Let's try multiple links! "
+                a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")
+                    = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925"
+                = ' '
+                a(href="https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c")
+                    = "https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c"
+                = ' '
+                a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06")
+                    = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06"
+
+        .c-box
+            +backdrop
+                +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])(theme='static-white')
                     = "Let's try multiple links! "
                     a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")
                         = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925"
@@ -14,8 +26,8 @@ mixin view-lightbox
                         = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06"
 
         .c-box
-            +backdrop(class='t-media')
-                +lightbox(['avatar.png'])
+            +backdrop
+                +lightbox(['avatar.png'])(theme='static-white')
                     = "Let's try multiple links! "
                     a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")
                         = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925"