mixin view-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' })
                +card-avatar(src='avatar.png')
                +card-body
                    +card-title= 'XS Heading'
                    +card-content
                        p= loremIpsum
                        p= loremIpsum
                +card-footer
                    = 'Footer'

            +card
                +card-body
                    .l-media
                        +avatar(class='l-media__block' src='avatar.png')
                        .l-media__block.l-media__block--main
                            strong.u-d-block= 'Volpeon'
                            small.u-d-block= '@volpeon@is-a.wyvern.rip'
                    +card-content
                        p= loremIpsum
                        p= loremIpsum
                +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '16 / 9' })
                +card-body
                    .l-media
                        .l-media__block
                            +badge('positive')(quiet=true icon='repeat' href='#')
                                +icon('repeat')
                                strong.u-mis-50= '12'
                        .l-media__block
                            +badge('warning')(quiet=true icon='star' href='#')
                                +icon('star')
                                strong.u-mis-50= '34'
                        .l-media__block.u-mis-auto
                            +a-button(primary=true)= 'Reply'

            +card(quiet=true href='#')
                +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })
                +card-body
                    +card-title= 'XS Heading'
                    +card-content
                        p= loremIpsum
                        p= loremIpsum

        each layout in ['grid', 'masonry', 'masonry-h']
            -
                let quiet = true

                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}`