{{ define "blog-main" }}
  <div class="blog-topitem pt-24 pb-20">
    {{- range first 1 .Pages -}}
        <div class="blog-item -top group cursor-pointer h-96">
          <figure class="image mt-1 w-full aspect-video overflow-hidden rounded-3xl">
            <a href="{{.RelPermalink}}">
              <img class="object-cover group-hover:scale-105 transition duration-500 w-full h-full" src="{{ .Params.Image }}" alt="{{ .Title }}">
            </a>
          </figure>
          <div class="inner pl-10 pt-1">
            <time class="datetime">{{ .Date | time.Format ":date_long" }}</time>
            <a href="{{.RelPermalink}}">
              <h2 class="title text-3xl font-bold group-hover:underline">{{ .Title }}</h2>
              <p class="lead">{{ .Summary }}</p>
            </a>
            <div class="flex flex-wrap content-start">
              {{ range $name := .Params.tags }}
                {{ with $.Site.GetPage (printf "/tags/%s" $name) }}
                  <a class="tag" href="{{ .RelPermalink }}">{{ $name }}</a>
                {{ end }}
              {{ end }}
            </div>
          </div>
        </div>
    {{- end -}}
  </div>
      <div class="blog-section mt-5 mx-auto">
        <h2 class="title">Our latest posts</h2>
        <div class="blog-list -threecol">
          {{ range first 3 .Pages }}
          <div class="blog-item group cursor-pointer">
            <figure class="image mt-1 w-full aspect-video overflow-hidden rounded-3xl">
              <a href="{{.RelPermalink}}">
                <img class="object-cover group-hover:scale-105 transition duration-500 w-full h-full" src="{{ .Params.Image }}" alt="">
              </a>
            </figure>
            <div class="inner">
              <time class="datetime">{{ .Date | time.Format ":date_long" }}</time>
              <a href="{{.RelPermalink}}">
                <h2 class="title text-3xl font-bold group-hover:underline">{{ .Title }}</h2>
              </a>
              <div class="tag-list">
                {{ range $name := .Params.tags }}
                  {{ with $.Site.GetPage (printf "/tags/%s" $name) }}
                    <a class="tag" href="{{ .RelPermalink }}">{{ $name }}</a>
                  {{ end }}
                {{ end }}
              </div>
            </div>
          </div>
        {{ end }}
      </div>
    </div>
    {{ if gt .Pages 3 }}
    <div id="blog-all-posts" class="blog-section">
      <h2 class="title">All Posts</h2>
      <div class="blog-list -plain">
        {{ range after 3 .Pages }}
        <div class="blog-item group cursor-pointer">
          <figure class="image flex-none mt-1 w-full aspect-video overflow-hidden rounded-3xl">
            <a href="{{.RelPermalink}}">
              <img class="object-cover group-hover:scale-105 transition duration-500 w-full h-full" src="{{ .Params.Image }}" alt="{{ .Title }}">
            </a>
          </figure>
          <div class="inner">
            <time class="datetime">{{ .Date | time.Format ":date_long" }}</time>
            <a href="{{.RelPermalink}}">
              <h2 class="title text-3xl font-bold group-hover:underline">{{ .Title }}</h2>
            </a>
            <div class="tag-list">
              {{ range $name := .Params.tags }}
                {{ with $.Site.GetPage (printf "/tags/%s" $name) }}
                  <a class="tag" href="{{ .RelPermalink }}">{{ $name }}</a>
                {{ end }}
              {{ end }}
            </div>
          </div>
        </div>
        {{ end }}
      </div>
      <div class="mt-20 mb-64">
        <button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-sm px-5 py-2.5 text-center me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
          Load more posts
        </button>
      </div>
    </div>
    {{ end }}
  </div>
{{ end }}