<section>
  <ul class="posts">
    {% for p in page.find(theme_config.blog_page).children.order('date', 'desc').slice(0, 5) %}
    {% set image = p.media[p.header.primaryImage] ?: p.media.images|first %}
    {% set title = p.title|raw %}
      <li>
        <article>
          <header>
            <h3>
              <a href="{{p.url}}">{{ title }}</a>
            </h3>
            {% if config.plugins["translate-date"].enabled %}
              <time class="published" datetime="{{ p.date|td(null, "Y-m-d") }}">{{ p.date|td(null, "M j, Y") }}</time>
            {% else %}
              <time class="published" datetime="{{ p.date|date("Y-m-d") }}">{{ p.date|date("M j, Y") }}</time>
            {% endif %}
          </header>
          <a href="{{p.url}}" class="image" aria-label="{{ title }}">
            {{ image.cropZoom(64,64).quality(60).loading('lazy').attribute('decoding','async').html(title,title)|raw }}
          </a>
        </article>
      </li>
    {% endfor %}
  </ul>
</section>
