mixin responsive_image(alt, thumb, fallback, urls, sizes, aspect_ratio, webp_urls)
  .responsive.container&attributes(attributes)
    .responsive.placeholder(style=`padding-bottom: ${aspect_ratio};background-image: url(${thumb})`)
      noscript
        picture
          if webp_urls
            source(type="image/webp", sizes=sizes, srcset=webp_urls, alt=alt)
          source(sizes=sizes, srcset=urls, alt=alt)
          img(src=fallback, alt=alt)
      picture.load-responsive
        if webp_urls
          source(type="image/webp", sizes=sizes, data-srcset=webp_urls, alt=alt)
        source(sizes=sizes, data-srcset=urls, alt=alt)
        img(data-src=fallback, alt=alt)

mixin theme_card(id, name)
  a.card(href=`/assets/images/${id}.png`)
    .image(aria-hidden="true" role="img")
      +responsive_image(name, `/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%", `/assets/images/${id}@220.webp 220w, /assets/images/${id}@266.webp 266w, /assets/images/${id}@335.webp 335w, /assets/images/${id}@352.webp 352w, /assets/images/${id}@532.webp 532w`)
    .content
      .extra=name