---
layout: base
---

<header class="section spot-color-primary">
  <div class="section__inner">
    <div class="wrapper flow region">
      <h1 class="text-center">{{ title }}</h1>
    </div>
  </div>
  {% include 'svg/divider-waves.svg' %}
</header>

<article class="region">
  <div class="wrapper flow prose">
    {{ content | safe }}
  </div>
</article>

<article class="region" style="--region-space-top: var(--space-s)">
  <div class="wrapper flow prose">
    <h2>{{ blog.title }}</h2>
    <!-- blog intro text is optional. -->
    {% if blog.intro %}
    <p>{{ blog.intro }}</p>
    {% endif %}
  </div>
  <!-- TODO: duplicate of partials/blog.njk -->

  <ul class="wrapper grid mt-l-xl" role="list" data-rows="masonry" data-layout="50-50">
    {% set postslist = collections.posts %} {% for post in postslist.slice(0, 4) %}

    <li class="card flow overflow-hidden">
      <h3>
        <a href="{{ post.url | url }}">{{ post.data.title }}</a>
      </h3>
      {% set definedDate = post.date %} {% include "partials/date.njk" %}
      <p>{{ post.data.description }}</p>
    </li>

    {% endfor %}
  </ul>
</article>