{{ define "main" }}
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-8">
    {{ range .Pages }}
      <div
        class="overflow-hidden rounded-lg shadow-lg border-2 border-gray-200 hover:bg-primary-300 text-slate-600"
      >
        <a href="{{ .RelPermalink }}">
          {{ $image := .Resources.GetMatch "header" }}
          {{ if $image }}
            {{ $image := $image.Fill "1024x512 Center webp" }}
            <div class="relative z-0 mb-4">
              <img class="" src="{{ $image.RelPermalink }}" />
              <div
                class="absolute bottom-2 left-4 text-3xl text-white font-bold font-outline-1"
              >
                {{ .Title }}
              </div>
            </div>
          {{ else }}
            <div class="text-3xl font-bold m-4">
              {{ .Title }}
            </div>
          {{ end }}


          <div
            class="mx-4 mb-4 line-clamp-[7] text-balance bg-clip-text bg-gradient-to-b from-slate-700 from-60% text-transparent"
          >
            {{ .Summary }}
          </div>
        </a>
      </div>
    {{ end }}
  </div>
{{ end }}