<div class="home">
  <div class="recipes xs-px1 xs-mt2">
    <div class="clearfix">
    {{ range sort (where .Site.RegularPages "Section" "recipes") "Title" }}
      <div class="sm-col sm-col-6 md-col-6 lg-col-4 xs-px1 xs-mb2">
          <a class="block relative bg-blue" href="{{ .RelPermalink }}">
            {{ if .Params.Image }}
              <div class="image ratio bg-cover" style="background-image:url({{.Permalink}}{{ .Params.Image }});"></div>
            {{ else }}
              {{ with .Resources.ByType "image" }}
                {{ range first 1 . }}
                  <div class="image ratio bg-cover" style="background-image:url({{ .Permalink }});"></div>
                {{ end }}
              {{ else }}
                <div class="image ratio bg-cover"></div>
              {{ end }}
            {{ end }}
            <h1 class="title p2 m0 absolute white bottom-0 left-0 title-shadow">{{ .Title }}</h1>
          </a>
      </div>
    {{ end }}
    </div>
  </div>
</div>
