{{ 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 hover:bg-primary-300 text-slate-700">
        <!-- <a href="{{ .RelPermalink }}"> -->
        {{ $image := .Resources.GetMatch "header" }}
        {{ with $image }}
          {{ $image := $image.Fill "1024x512 Center webp" }}
          <img class="" src="{{ $image.RelPermalink }}" />
        {{ end }}
        <div class="text-lg m-4">
          {{ .Title }}
        </div>

        <div class="mx-4 mb-4 line-clamp-5 text-balance">
          {{ .Summary }}
          
        </div>

        <!-- </a> -->
      </div>
    {{ end }}
  </div>
{{ end }}