{{ $item := .item }}

{{ $link := $item.RelPermalink }}
{{ $target := "" }}
{{ if $item.Params.external_link }}
  {{ $link = $item.Params.external_link }}
  {{ $target = "target=\"_blank\" rel=\"noopener\"" }}
{{ end }}

{{ $resource := partial "functions/get_featured_image.html" $item }}
{{ $anchor := $item.Params.image.focal_point | default "Center" }}

<a href="{{ $link }}" {{ $target | safeHTMLAttr }} class="mb-5">
  <div class="md:flex">
    <div class="md:flex-shrink-0 overflow-hidden">
      {{ with $resource }}
        {{ $original_image := .Fill (printf "655x655 %s" $anchor) }}
        {{ $responsive := partial "functions/process_responsive_image.html" (dict 
            "image" $original_image 
            "mode" "responsive"
            "sizes" (slice 192 384 480 655)
        ) }}
        
        <img class="h-48 w-full object-cover md:w-48 hover:scale-125 transition duration-500 cursor-pointer object-cover" 
             srcset="{{ $responsive.srcset }}"
             sizes="(max-width: 768px) 100vw, 192px"
             src="{{ $responsive.fallback.RelPermalink }}" 
             width="{{ $original_image.Width }}" 
             height="{{ $original_image.Height }}"
             loading="lazy" 
             alt="{{ $item.Title | plainify }}">
      {{end}}
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-md text-primary-700 dark:text-primary-200 font-semibold">{{ $item.Title }}</div>
      <p class="block mt-1 text-sm leading-tight font-medium text-black dark:text-white">
        {{ ($item.Params.summary | default $item.Summary) | plainify | htmlUnescape | chomp -}}
      </p>
      <p class="mt-2 text-gray-500 dark:text-gray-400 text-sm">
        {{- $item.Date | time.Format (site.Params.locale.date_format | default ":date_long") -}}
      </p>
    </div>
  </div>
</a>