{% include "base-header.html" %}

<main class="mt-12 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  <div class="relative max-w-lg mx-auto divide-y-2 divide-gray-200 lg:max-w-7xl">
    <div>
      <h2 class="text-3xl tracking-tight font-extrabold text-gray-900 sm:text-4xl">
        {{ title }}
      </h2>
      <div class="mt-3 text-xl text-gray-500 sm:mt-4">
        {{ content | safe }}
      </div>
    </div>

    <div class="mt-12 grid gap-16 pt-12 lg:grid-cols-3 lg:gap-x-5 lg:gap-y-12">
      {%- for content in collections.pinned | reverse -%}
        <div>
          <div>
            <a href="/{{ content.data.tags[0] }}/" class="inline-block">
              <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-indigo-100 text-indigo-800">
                {{ content.data.tags[0] | capitalize }}
              </span>
            </a>
          </div>
          <a href="{{ content.url }}" class="block mt-4">
            <p class="text-xl font-semibold text-gray-900">
              {{ content.data.title }}
            </p>
            <p class="mt-3 text-base text-gray-500">
              {{ content.data.description }}
            </p>
          </a>
        </div>
      {%- endfor -%}
    </div>
  </div>
</main>

{% include "base-footer.html" %}