{{!< default}}

<main class="content-area">
    <section class="px-5 sm:px-6" data-page-hero="">
    <div class="max-w-site py-6 md:py-8 mx-auto flex flex-col gap-6 text-center">
      <div class="flex-1 max-w-xl flex flex-col gap-2 justify-center mx-auto items-center">
        <h1 class="text-xl md:text-2xl lg:text-3xl font-semibold text-balance leading-[1.125]">Tags</h1>
          <p class="text-base text-balance text-typ-tone max-w-md leading-snug [&amp;_a]:underline [&amp;_a]:decoration-2 [&amp;_a]:underline-offset-2 [&amp;_a:hover]:text-brand">Browse by topic</p>
      </div>
    </div>
  </section>

  <section class="px-5 sm:px-6 mb-8" data-tags="">
    {{#get "tags" limit="100" include="count.posts" order="count.posts desc"}}
      <ul class="tag-directory max-w-site mx-auto gap-4 sm:gap-5 grid sm:grid-cols-2 lg:grid-cols-3">
        {{#foreach tags}}
          <li class="tag-directory__item h-full" data-tag-card="{{slug}}">
            <a class="tag-directory__card relative h-full flex flex-col gap-2 p-4 border border-brd rounded-r-lg border-l-[3px] border-l-transparent rounded-l-none hover:bg-[color-mix(in_srgb,var(--color-accent)_10%,transparent)]" href="{{url}}"{{#if accent_color}} style="--color-accent: {{accent_color}}; border-left-color: var(--color-accent);"{{/if}}>
              <h2 class="text-sm font-medium leading-tight flex items-center justify-between gap-1">{{name}}</h2>
              <i class="icon icon-arrow-up-right size-4 stroke-2 absolute top-4 right-4" role="presentation">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path d="M17 7l-10 10"></path>
                  <path d="M8 7l9 0l0 9"></path>
                </svg>
              </i>
              {{#if description}}
                <p class="flex-1 text-[0.8rem] text-typ-tone leading-tight line-clamp-3 text-overflow-ellipsis">{{description}}</p>
              {{else}}
                <p class="flex-1 text-[0.8rem] text-typ-tone leading-tight line-clamp-3 text-overflow-ellipsis">Posts filed under {{name}}.</p>
              {{/if}}
              <span class="text-[0.8rem] text-typ-tone leading-tight font-medium">{{plural count.posts empty="0 posts" singular="% post" plural="% posts"}}</span>
            </a>
          </li>
        {{/foreach}}
      </ul>
    {{/get}}
  </section>
    </section>
</main>
