{{ define "main" }}
<div class=" white">
  <div class="grid px1 px2l pyl">

    <div class="f-subheadline lh-title semi w-60 ">{{.Title}}</div>

  </div>
</div>
<div class="white">

  <div class="grid px1 px2l">


    <div class="flex flex-wrap flex-gutter-2-050 " >
      {{$categorypages := .Pages.ByDate.Reverse}}
      {{ range $categorypages }}

      <div class="w-50 flex flex-col" >

        {{ $img := .Resources.GetMatch "*featured*" }}
        {{ $permalink := .RelPermalink }}
        {{ with $img }}
        {{ $small := .Resize "600x" }}
        <div class="aspect sixteen-nine ">
          <div class="b-cover" >
           <img src="{{$small.RelPermalink}}" alt="">
            <a href="{{$permalink}}" class="link-over"></a>
          </div>
        </div>
        {{end}}

        <div class="white flex1 p1 flex flex-col justify-between">


          <h4 class="mt0 mb050"><a class="inverse font-color bold" href="{{.RelPermalink}}">{{.Title}}</a></h4>
          <ul class="unstyled comma-separated small uppercase ">
            {{ range .Params.categories }}
            <li><a class="inverse normal g6-text" href="/categories/{{ . | urlize }}">{{ . }}</a></li>
            {{ end }}
          </ul>

        </div>
      </div>

      {{end}}
    </div>


  </div>
</div>

<h2>All categories</h2>
<ul>
  {{ range $key, $value := .Site.Taxonomies.categories }}
  <li>
    <a href="/categories/{{ $key | urlize }}">{{ $key | title }}</a>
  </li>
  {{ end }}
</ul>


{{ end }}