card.html

          <div class="card">
            <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 %}
                  <div class="caption">
                    <figcaption class="tag has-text-white has-background-black  is-size-7 is-italic m-1">{{ post.extra.depiction.credits }}</figcaption>
                  </div>
                  {% endif %}
                </figure>
              </a>
            </div>
            <div class="card-content">
              <a href="{{ post.permalink }}"><h3 class="title is-4">{{ post.title }}</h3></a>
              <div class="content">
                {{ post.summary | safe }}
              </div>
              <div class="card-footer">
                <div class="card-footer-item">
                  {% include "blog/meta_media.html" -%}
                </div>
              </div>
            </div>
          </div>