{{ $featured_image := .Params.featured_image }}
<article class="bb b--black-10">
  <div class="db pv4 ph3 ph0-l no-underline dark-gray">
    <div class="flex flex-column flex-row-ns">
      {{ if .Params.featured_image }}
      {{/* Trimming the slash and adding absURL make sure the image works no matter where our site lives */}}
      {{ $featured_image := (trim $featured_image "/") | absURL }}
      <div class="pr3-ns mb4 mb0-ns w-100 w-40-ns">
        <a href="{{.RelPermalink}}" class="db grow">
          <img src="{{ $featured_image }}" class="img" alt="image from {{ .Title }}">
        </a>
      </div>
      {{ end }}
      <div class="blah w-100{{ if .Params.featured_image }} w-60-ns pl3-ns{{ end }}">
        <div class="flex flex-column flex-row-l items-center-l mv2">
          <h1 class="f3 lh-title flex-grow-1 mv2">
            <a href="{{.RelPermalink}}" class="color-inherit dim link">
              {{ .Title }}
            </a>
          </h1>
          {{ if .Params.author }}
          <p class="f6 mh3-l flex items-center tracked">
            By
            {{ with .Params.authorAvatar }}
            <img class="w2 br-100 mh2 ba" src="/avatars/{{ . }}.jpg" alt="avatar" />
            {{ end }}
            {{ .Params.author | markdownify }}
          </p>
          {{ end }}
          {{ if .Date }}
          <time class="f6 mv1 dib tracked" datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">
            {{- .Date.Format "2006-01-02" -}}
          </time>
          {{ end }}
        </div>
        <div class="f6 f5-l lh-copy nested-copy-line-height nested-links">
          {{ .Summary }}
        </div>
        <a href="{{.RelPermalink}}" class="ba b--moon-gray bg-light-gray br2 color-inherit dib f7 hover-bg-moon-gray link mt2 ph2 pv1">{{ $.Param "read_more_copy" | default (i18n "readMore") }}</a>
      </div>
    </div>
  </div>
</article>