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

<main class="max-w-7xl mx-auto px-2">
  <div class="relative max-w-lg mx-auto divide-y-2 divide-yellow lg:max-w-7xl">
    <div class="p-2 bg-base/75 shadow rounded border-2 border-base border-l-yellow sm:rounded-tl-none sm:rounded-tr-none">
      <h1 class="text-yellow mt-2 mb-8 text-3xl tracking-tight sm:text-4xl">
        {{ title }}
      </h1>
      <div class="mt-3">
        {{ content | safe }}
      </div>
    </div>

    <div class="mt-16 grid gap-16 pt-16 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 outline-link">
              <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm bg-mantle text-teal hover:underline">
                {{ content.data.tags[0] | capitalize }}
              </span>
            </a>
          </div>
          <a href="{{ content.url }}" class="block mt-4 outline-link shadow border-l-2 border-yellow hover:border-blue active:border-blue rounded">
            <h3 class="relative bg-overlay2 h-20 overflow-hidden rounded-tl rounded-tr text-xl text-base">
              <span class="absolute z-10 inset-3">{{ content.data.title }}</span>
              <img class="absolute grayscale opacity-20 contrast-50 scale-110 bottom-1/2 left-0 right-0 translate-y-1/2" src="{{ content.data.image }}" alt="" role="presentation" />
            </h3>
            <div class="relative overflow-hidden h-24 rounded-bl rounded-br pt-3 text-text">
              <div class="absolute scale-110 bottom-1/2 left-0 right-0 translate-y-1/2 bg-crust">
                <img class="mb-40 contrast-50 grayscale opacity-10" src="{{ content.data.image }}" alt="" role="presentation" />
              </div>
              <div class="px-3 relative z-10">
              {{ content.data.description | markdown | safe }}
              </div>
            </div>
          </a>
        </div>
      {%- endfor -%}
    </div>
  </div>
</main>

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