{{template "head" .}}
{{template "site_header" .}}
<main class="mx-auto max-w-7xl px-5 pb-24 pt-32 md:px-8 md:pt-40">
  <div class="mb-10 flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
    <div>
      <p class="mb-3 text-sm uppercase tracking-[0.2em] text-neutral-500">Selected work</p>
      <h1 class="text-5xl font-semibold md:text-7xl">Projects</h1>
    </div>
    <p class="max-w-md text-neutral-600">A visual index of architectural and interior design work.</p>
  </div>
  <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4" hx-boost="true" hx-target="body" hx-swap="outerHTML transition:true">
    {{range .Projects}}
    <a href="/projects/{{.Slug}}" class="group block">
      <div class="aspect-square overflow-hidden bg-neutral-200">
        <img src="{{.CoverImage}}" alt="{{.Title}}" class="h-full w-full object-cover transition duration-500 group-hover:scale-105">
      </div>
      <div class="mt-3">
        <h2 class="text-lg font-medium">{{.Title}}</h2>
        <p class="text-sm text-neutral-500">{{.Location}} · {{.Year}}</p>
      </div>
    </a>
    {{end}}
  </div>
</main>
{{template "footer" .}}
<div id="overlay-root"></div>
</body>
</html>