gallowelds.com/themes/gallo/layouts/partials/artist_catalog.html

<div
  class="mt-2 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-4"
>
  {{ range $index, $element := .Params.art }} {{ if ne .item "" }}
  <div class="relative flex flex-col bg-white rounded-lg border p-4 relative">
    <img
      loading="lazy"
      src="{{ .main }}"
      class="h-72 w-full rounded-md object-cover"
    />
    <div class="flex flex-row gap-2 my-2 justify-between">
      <div class="flex flex-col items-start">
        <span>
          <strong class="text-base text-gray-700"> {{ .title }}</strong>
          <span class="text-[0.6rem] text-gray-600">{{ .year }}</span>
        </span>
      </div>
      {{ if .status }}
      <div>
        <span
          class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded-full"
          >{{ .status }}</span
        >
      </div>
      {{ end }}
    </div>
    <div class="grid grid-cols-1 place-items-end">
      <a class="w-full" href="#modal-{{ $index | urlize }}">
        <button
          type="button"
          class="w-full px-4 py-4 sm:py-2 sm:px-3 text-xs font-medium text-center text-white bg-black rounded-lg hover:bg-gray-800 focus:ring-4 focus:outline-none transition-all duration-200"
        >
          Expand
        </button>
      </a>
    </div>
    <div
      id="modal-{{ $index | urlize }}"
      class="fixed z-10 inset-0 overflow-y-auto hidden bg-gray-500 bg-opacity-75 transition-opacity"
      aria-labelledby="modal-title"
      role="dialog"
      aria-modal="true"
    >
      <div
        class="flex items-end justify-center min-h-screen p-4 text-center sm:block sm:p-0"
      >
        <div class="fixed inset-0" aria-hidden="true"></div>
        <span
          class="hidden sm:inline-block sm:align-middle sm:h-screen"
          aria-hidden="true"
          >&#8203;</span
        >
        <div
          class="border inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle self-center sm:max-w-lg w-full"
        >
          <div
            class="bg-white max-h-[80vh] overflow-y-scroll overflow-x-hidden px-4 pt-5 pb-4 sm:p-6 sm:pb-4"
          >
            <div class="sm:flex sm:items-start">
              <div class="w-full mt-3 text-center sm:mt-0 sm:text-left">
                <h3 class="text-xl" id="modal-title">
                  <strong>{{ .item }}</strong>
                </h3>
                {{ if .gallery }}
                <div class="carousel">{{ partial "carousel.html" . }}</div>
                {{ end }}
                <div>
                  <div class="flex flex-row gap-2 my-2 justify-between mt-4">
                    <div class="flex flex-col items-start">
                      <span class="text-xs text-gray-600">Title:</span>
                      <span>
                        <strong class="text-lg text-gray-700">
                          {{ .title }}</strong
                        >
                      </span>
                    </div>
                    {{ if .status }}
                    <div>
                      <span
                        class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded-full"
                        >{{ .status }}</span
                      >
                    </div>
                    {{ end }}
                  </div>
                  {{ if .location }}
                  <div class="flex flex-col items-start mb-2">
                    <span class="text-xs text-gray-600">Location:</span>
                    <span> {{ .location }} </span>
                  </div>
                  {{ end }}
                  <div class="flex flex-col items-start mb-2">
                    <span class="text-xs text-gray-600">Year:</span>
                    <span> {{ .year }} </span>
                  </div>
                  <div class="flex flex-col items-start">
                    <span class="text-xs text-gray-600">Description:</span>
                    <span class="text-left"> {{ .description }} </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
            <button
              id="close-modal"
              class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-4 sm:py-2 sm:px-3 bg-black text-base font-medium text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black sm:ml-3 sm:w-auto sm:text-sm"
              @click="open = false"
            >
              Close
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  {{ end }} {{ end }}
</div>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const modalButtons = document.querySelectorAll(".grid-cols-1 a");
    const closeButtons = document.querySelectorAll("#close-modal");

    modalButtons.forEach((button) => {
      button.addEventListener("click", function (e) {
        e.preventDefault();
        const modalId = this.getAttribute("href").substring(1);
        const modal = document.getElementById(modalId);
        modal.classList.remove("hidden");
      });
    });

    closeButtons.forEach((button) => {
      button.addEventListener("click", function (e) {
        e.preventDefault();
        const modal = this.closest(".fixed");
        modal.classList.add("hidden");
      });
    });
  });
</script>