<div class="mt-6 mb-4">
  <div class="mb-4">
    <a class="text-3xl font-bold text-neutral-600" href="{{ .Permalink }}"
      >{{ .Title }}</a
    >
  </div>
  <div class="grid xl:grid-cols-3 grid-cols-1 justify-center gap-x-8">
    <div class="flex flex-col justify-center h-fit mb-2">
      {{ $image := .Resources.GetMatch "header" }}
      {{ with $image }}
        {{ $image := $image.Fill "512x512 Center webp" }}
        <img class="md:mt-2" src="{{ $image.RelPermalink }}" />
      {{ end }}
      <span class="mt-4 text-neutral-500">{{ .Param "author" }}</span>
      <span class="text-neutral-500"
        >{{ .Date | time.Format ":date_long" }}</span
      >
    </div>
    <div class="prose lg:col-span-2">
      {{ .Summary }}
      <div class="mt-4 md:mt-6">
        <a
          class="underline text-tertiary-600 hover:text-tertiary-500 visited:text-primary-400"
          href="{{ .Permalink }}"
          >Weiterlesen...</a
        >
      </div>
    </div>
  </div>
</div>
