{{!< default}}

{{#post}}

  <article class="relative">

    {{!-- Header --}}
    {{> extras/patterns}}

    <header class="relative px-4 sm:px-6 lg:px-8 mt-10">


      <div class="max-w-prose mx-auto object-center">
        {{#if feature_image}}
          <img class="gh-feature-image mx-auto" srcset="{{img_url feature_image size="s"}} 300w,
                    {{img_url feature_image size="m"}} 600w,
                    {{img_url feature_image size="l"}} 1000w,
                    {{img_url feature_image size="xl"}} 2000w"
            sizes="(max-width: 1000px) 1000px, 2000px"
            loading="lazy" src="{{img_url feature_image size="xl"}}"
            alt="{{title}}" />
        {{/if}}
        <h1 class="mt-10">
          <span class="mt-2 block text-4xl text-center leading-8 font-extrabold tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl">
            {{title}}
          </span>
        </h1>
        {{#if custom_excerpt}}
          <p class="mt-8 text-2xl text-gray-500 dark:text-gray-300 leading-8">
            {{custom_excerpt}}
          </p>
        {{/if}}


      </div>
    </header>

    <div class="post-body mt-10 max-w-prose mx-auto text-gray-700 dark:text-gray-300">

      {{content}}

    </div>

    <div class="post-body mt-10 max-w-prose mx-auto text-gray-700 dark:text-gray-300">


    <h3 class="text-base mt-24  text-gray-500 text-center">
      Wait - there's more! Read on:
      </h3>

    </div>


    <div class="w-default mt-8 grid gap-5 md:grid-cols-2 mb-10">

        {{#get "posts" filter="tags:{{primary_tag.slug}}+id:>{{id}}" limit="1" order="id asc"}}

          {{#foreach posts}}
            {{> cardFancySmall}}
          {{/foreach}}
        {{/get}}

        {{#get "posts" filter="tags:{{primary_tag.slug}}+id:<{{id}}" limit="1" order="id desc"}}
          {{#foreach posts}}
            {{> cardFancySmall}}
          {{/foreach}}
        {{/get}}

        {{> cardTag}}
    </div>


{{!--     <aside class="my-20 max-w-prose mx-auto text-gray-700 dark:text-gray-300">

      <div class="w-full grid gap-5 grid-cols-1 md:grid-cols-2">


        {{> cardTag}}

        {{> cardCTA}}

      </div>
    </aside> --}}

  </article>

{{/post}}