{% from 'thumb.html' import preview with context %}
<article class="gallery-card" data-category="{{ entry.category }}" data-title="{{ entry.title }} {{ entry.description }} {{ entry.category }}">
  <a class="card-link" href="{{ entry.page|url }}">
    <span class="card-image plate-paper">{{ preview(entry.image, '(max-width: 640px) calc(100vw - 32px), 420px', 'alt="" loading="lazy" decoding="async" width="640" height="480"') }}</span>
    <span class="card-copy"><strong class="card-title">{{ entry.title }}</strong><span class="card-text">{{ entry.description }}</span>
      <span class="card-meta"><span class="tag">{{ entry.category }}</span>{% if entry.version not in ['Stable', 'Core'] %}<span class="tag tag-flag">{{ entry.version }}</span>{% endif %}{% if entry.requires not in ['Core only', entry.version] %}<span class="card-requires">{{ entry.requires }}</span>{% endif %}</span></span>
  </a>
  <button type="button" class="card-zoom" data-lightbox="{{ entry.image|url }}" data-lightbox-title="{{ entry.title }}" data-lightbox-href="{{ entry.page|url }}" aria-label="Preview {{ entry.title }}" hidden><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true"><path d="M12 3.5h4.5V8M8 16.5H3.5V12M16.5 3.5 11 9M3.5 16.5 9 11"/></svg></button>
</article>