{{$permalink := .Permalink}}
{{- $relatedContentClass := "" -}}
{{- if .Params.relatedContentClass -}}
{{- $relatedContentClass = .Params.relatedContentClass -}}
{{- else -}}
{{- $relatedContentClass = .Site.Params.theme.relatedContentDefaultClass -}}
{{- end -}}
<div class="w-33  flex flex-col-md mb2 " >
 {{- with .Params.youtubeid -}}
 <div class="with-link gf9 w" >
  <div class="aspect sixteen-nine">
   <iframe src="https://www.youtube.com/embed/{{.}}" class="abs" title="YouTube Video"></iframe>
  </div>
  <a href="{{$permalink}}" class="link-over"></a>
 </div>
 {{- else -}}
 <div class="with-link gf9 w thumb" >
  {{ $image := .Resources.GetMatch "*featured*" }}
  {{- $imagesrc := "" -}}
  {{- $title := "" -}}
  {{- with $image -}}
  {{- $image = .Resize "600x" -}}
  {{- $imagesrc = .RelPermalink -}}
  {{- $title = .Title -}}
  {{- end -}}
  <div class="aspect sixteen-nine ">
   <img class="cover abs" src="{{$imagesrc}}" alt="Media item {{ $title }}">
   <a href="{{$permalink}}" class="link-over"></a>
  </div>
 </div>
  {{- end -}}
 <div class="{{- with $relatedContentClass}}{{ . -}}{{- else -}}gf9{{- end }} p1l px1 py050 flex flex-col justify-between flex1" >
  <div class="mb1">

   <h4 class="m0 lh13"><a class="inv font-color semi" href="{{$permalink}}">{{- with .Params.channel }}<b>{{.}}:</b> {{ end }}{{.Title}}</a></h4>

   <time class="vsmall g8-text" datetime="{{ dateFormat " 2006-01-02T15:04:05-07:00" .Lastmod }}">
   {{ dateFormat "2 Jan, 2006" .Lastmod }}
   </time>
  </div>

  <div class="vsmall">{{- range .Params.categories -}}<a href="/categories/{{- . | urlize -}}/" class="pipe uppercase text-colour inv normal">{{ . }}</a>{{ end }}{{- if and .Params.categories .Params.tags }}: {{ end -}} {{ range .Params.tags }}<a href="/tags/{{- . | urlize -}}/" class="com text-colour inv normal">{{ . }}</a>{{ end }}</div>

 </div>

</div>