<div class="card is-flex is-flex-direction-column is-fullheight is-justify-content-space-between" typeof="schema:BlogPosting" resource="{{ post.permalink }}" property="schema:blogPost">
  <div class="card-image">
    <a href="{{ post.permalink }}">
      <figure class="image is-4by3">
        {% set image = resize_image(path="@/" ~ post.colocated_path ~ "/" ~ post.extra.depiction.image, width=800, height=600) -%}
        <img src="{{ image.url }}" alt="{{ post.extra.depiction.alt }}" />
        {% if post.extra.depiction.credits %}
          <figcaption class="p-1 has-text-white has-background-black is-size-7 is-italic">{{ post.extra.depiction.credits }}</figcaption>
        {% endif %}
      </figure>
    </a>
  </div>
  <div class="card-content is-fullheight">
    <a href="{{ post.permalink }}"><h3 class="title is-4" property="schema:headline">{{ post.title }}</h3></a>
    <div class="content">
      {% include "blog/meta_line.html" -%}
      <span propery="schema:abstract">{{ post.summary | safe }}</span>
    </div>
  </div>
  <div class="card-footer">
    <div class="card-footer-item">
      <div class="is-fullwidth">
        {% include "blog/author_media.html" -%}
      </div>
    </div>
  </div>
  {% if post.extra.microdata.about %}
    {% for about in post.extra.microdata.about %}
      <meta property="schema:about" href="{{ about }}" />
    {% endfor %}
  {% endif %}
</div>