{{ define "main" }}

<section class="text-gray-700 body-font">
  <div class="container px-5 py-8 mx-auto">
    {{- partial "custom-message.html" . -}}

    <div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
      {{ range where .Site.Pages "Kind" "page" }}
      {{ if ne .Params.Exclude true }}
      <a
        target="_blank"
        rel="noopener"
        href="{{ .Params.Link }}"
        class="card p-4 md:w-1/3 sm:mb-4 mb-6 hover:shadow-xl hover:bg-gray-400 transition duration-200 ease-in rounded-lg {{ lower .Section }}"
      >
        <div class="rounded-lg h-64 overflow-hidden relative">
          {{ if (or .Params.Image .CurrentSection.Params.Image) }}
          <img
            alt="{{ .Title }}"
            class="object-cover object-center h-full w-full"
            src="{{ (or .Params.Image .CurrentSection.Params.Image) }}"
          />
          {{ end }}
          <span
            class="bg-blue-500 text-white px-3 py-1 tracking-widest text-xs absolute right-0 top-0 rounded-bl"
            >{{ title .Section }}</span
          >
          <h2
            class="h2 text-white px-2 py-1 tracking-widest text-2xl leading-tight font-extrabold font-bree text-center w-full h-full flex justify-center items-center absolute top-0 left-0"
          >
            {{ .Title }}
          </h2>
          <p
            class="h3 text-white px-2 py-1 tracking-widest text-md leading-tight font-light w-full text-center absolute bottom-0 left-0"
          >
            {{ .Params.Subtitle }}
          </p>
        </div>
      </a>
      {{ end }}
      {{ end }}
    </div>
  </div>
</section>

{{ end }}