  <div class="bg-white">
  <div class="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
    <h2 class="text-2xl font-bold tracking-tight text-gray-900">Available Zines</h2>

  <div class="mt-6 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8">
  {{ range .data.shopItems }}

    <div class="group relative">
      <img src="/{{ .Image }}" alt="Product Image" class="aspect-4/5 w-full rounded-md bg-gray-200 object-cover group-hover:opacity-75 lg:aspect-auto lg:h-80">
      <div class="mt-4 flex justify-between">
        <div>
          <h3 class="text-sm text-gray-700">
            <a href="/shopitems/{{ .ID }}">
              <span aria-hidden="true" class="absolute inset-0"></span>
              {{ .Name }}
            </a>
          </h3>
          <p class="mt-1 text-sm text-gray-500">{{ .Abstract }}</p>
          <p class="mt-1 text-sm text-gray-500">{{ range .Tags }}{{ .Name }} {{ end }}</p>
        </div>
        <p class="text-sm font-medium text-gray-900">{{ .BasePrice }}€</p>
      </div>
    </div>

  {{ end }}
    </div>
    </div>
    </div>
