mixin responsive_image(thumb, fallback, urls, sizes, aspect_ratio)
  .responsive.container&attributes(attributes)
    .responsive.placeholder(style=`padding-bottom: ${aspect_ratio}`)
      noscript
        img(src=fallback sizes=sizes srcset=urls)
      img(src=thumb, data-src=fallback, sizes=sizes, data-srcset=urls)

mixin theme_card(id, name)
  a.card(href="/assets/images/#{id}.png")
    .image
      +responsive_image(`/assets/images/${id}@thumb.jpg`, `/assets/images/${id}@266.png`, `/assets/images/${id}@220.png 220w, /assets/images/${id}@266.png 266w, /assets/images/${id}@335.png 335w, /assets/images/${id}@352.png 352w, /assets/images/${id}@532.png 532w`, "(max-width: 767px) calc(50vw - 2em + 1px), (max-width: 991px) 336px, (max-width: 1199px) 221px, 267px", "177.7777777777778%")
    .content
      .extra=name