{{ define "main" }}
  <div class="container mx-auto p-4 grid gap-6">
    <header class="mb-8">
      <h1 class="text-4xl font-mono font-bold text-center">Tags</h1>
      {{ if .Description }}
        <p class="text-xl text-gray-600">{{ .Description }}</p>
      {{ end }}
    </header>

    <div class="grid sm:grid-cols-4 gap-6">
      {{ range .Pages }}
        <div class="tag-card sm:col-span-1">
          <a href="{{ .RelPermalink }}" class="block p-4 bg-ground-primary dark:bg-ground-primary-dark text-ground-primary-text dark:text-ground-primary-dark-text rounded-lg shadow hover:shadow-lg">
            <h2 class="text-2xl font-bold">{{ .Title }}</h2>
            <p class="text-lg">{{ .Description }}</p>
          </a>
        </div>
      {{ end }}
    </div>
  </div>
{{ end }}