<div class="media list-page-item mb-3" data-id="{{ .File.UniqueID }}">
  {{ if .Params.image }}
    <div class="d-none d-md-block align-self-center img-wrapper mr-3">
      <a href="{{ .RelPermalink }}">
        {{ .Scratch.Set "image" .Params.image }}
        {{ if hasPrefix .Params.image "resource:" }}
          {{ $resource := .Resources.GetMatch (replace .Params.image "resource:" "") }}
          {{ .Scratch.Set "image" ($resource.Resize "500x webp").RelPermalink }}
        {{ else if hasPrefix .Params.image "unsplash:" }}
          {{ $unsplash_id := replace .Params.image "unsplash:" "" }}
          {{ $query := querify "client_id" (getenv "UNSPLASH_ACCESS_KEY") }}
          {{ $unsplash_data := (getJSON "https://api.unsplash.com/photos/" $unsplash_id "?" $query )}}
          {{ .Scratch.Set "image" $unsplash_data.urls.thumb }}
        {{ end }}
        <img src='{{ .Scratch.Get "image" }}' decoding="async" loading="lazy" referrerpolicy="no-referrer" alt="" />
      </a>
    </div>
  {{ end }}
  <div class="media-body">
    <a href="{{ .RelPermalink }}">
      <h5 class="my-0">{{ .Title }}</h5>
    </a>
    <small>{{ partial "content-details.html" . }}</small>
    <p>{{ partial "summary.html" . }}</p>
  </div>
</div>