<a id="{{ .Slug }}" class="link--tile" href="{{ .RelPermalink }}" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <article class="item-tile lazy {{- with .Params.site }} item-tile--{{ . }}{{ end -}}"
        {{ if .Params.featured_image }}
          {{ with .Resources.GetMatch .Params.featured_image }}
            {{ if eq .MediaType.SubType "svg" }}
              style="background-image: url({{ .RelPermalink }})"
            {{ else }}
              {{ with .Resize "2000x webp" }}
                style="background-image: url({{ .RelPermalink }})"
              {{ end }}
            {{ end }}
          {{ else }}
            style="background-image: url({{ .Params.featured_image }})"
          {{ end }}
        {{ end }}
    >
          <header class="item-tile__header">
            {{ if ( or .Params.series .Params.published_in ) }}
            <span class="item-tile__banner item-tile__banner--{{ if .Params.series }}series{{ else if .Params.published_in }}published-in{{ end}}">
              {{- if .Params.series -}}
                {{ .Params.series | safeHTML }}
              {{- else if .Params.published_in -}}
                {{ .Params.published_in | safeHTML }}
              {{- end -}}
            </span>
            {{ end }}
              <h1 class="item-tile__title{{ if gt ( len ( .Title | plainify ) ) 40 }} item-tile__title--long{{ end }}" itemprop="name">
                <span role="text">{{ .Title | safeHTML }}</span>
              </h1>
              {{ with .Params.subtitle }}
                <p class="item-tile__subtitle">{{ . | safeHTML }}</p>
              {{ end }}
        </header>
    </article>
</a>