mixin view-card 
    +view('card', 'Card')
        .c-box(style={ display: 'flex', 'flex-direction': 'column', gap: '1em' })
            +card(href='#')
                +card-image(src='Drawing_Half.png')
                +card-avatar(src='avatar.png')
                +card-body
                    +card-title= 'XS Heading'
                    +card-content= loremIpsum
                +card-footer
                    = 'Footer'

            +card(href='#')
                +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= loremIpsum
                +card-image(src='Drawing_Half.png')
                +card-body
                    = 'Footer'