---
layout: base
---

<article class="wrapper">
  <header class="full | section" style="--spot-color: var(--color-secondary)">
    <div class="section__inner flow region" style="--region-space-top: var(--space-xl-2xl)">
      <h1 class="text-center text-base-light">{{ title }}</h1>
    </div>

    {% svg "divider/edgy", null, "seperator" %}
  </header>

  <div class="region flow prose" style="--region-space-top: var(--space-xl-2xl)">{{ content | safe }}</div>

  <custom-masonry layout="50-50">
    {% for item in pagination.items %}
      {% set definedDate = item.date %}

      <custom-card clickable>
        <h2 slot="headline">
          <a href="{{ item.url | url }}">{{ item.data.title }}</a>
        </h2>
        <span slot="date"> {% include "partials/date.njk" %} </span>
        {%
          if
          item.data.tags.length > 1
        %}
          <div slot="tag" webc:nokeep>
            {% for tag in item.data.tags %}
              {% if tag != "posts" %}
                <span class="button post-tag">{{ tag }}</span>
              {% endif %}
            {% endfor %}
          </div>
        {% endif %}
        <div slot="content" webc:nokeep>{{ item.data.description | markdownFormat | safe }}</div>
      </custom-card>
    {% endfor %}
  </custom-masonry>

  <!-- set collection to paginate -->
  {% set collectionToPaginate = collections.posts %}
  <!-- set target pagination settings in meta.js -->
  {% set metaKey = "blog" %}
  <!-- if the number of items in the collection is greater than the number of items shown on one page -->
  {% if collectionToPaginate.length > pagination.size %}
    <!-- include pagination -->
    {% include 'partials/pagination.njk' %}
  {% endif %}
</article>