{% extends "page.html" %}

{% block content_body %}
{% for wcard in pages|selectattr("slug", "in", page.wide_cards)|list %}
{# {% for wide_card in page.wide_cards %} #}
<article class="wcard">
  <header>
    <h3><a href="{{ SITEURL }}/{{ wcard.title|lower }}/">{{ wcard.title }}</a></h3>
  </header>
  <div class="wcard-gallery">
    {% if wcard.featured_images is defined %}
    <div class="wcard-gallery-mask">
      <ul>
        {% for image in wcard.featured_images %}
        <li class="wcard-image" style="animation-delay: {{ loop.index0 * 5 }}s">
          <a href="{{ SITEURL }}/{{ image.post }}">
            <img src="{{ SITEURL }}/{{ image.pic }}" alt="{{ image.alt }}" {% if image.y_offset is defined %}
              style="top: {{ image.y_offset }};" {% endif %} />
          </a>
          <div class="wcard-tooltip">
            <p>{{ image.alt }}</p>
          </div>
        </li>
        {% endfor %}
    </div>
    {% endif %}
  </div>
</article>
{% endfor %}
{% endblock content_body %}

{% block content_footer %}
{% endblock content_footer %}