<section class="w-full py-12 px-4 bg-white dark:bg-muted-900 overflow-hidden">
  <!--Container-->
  <div class="w-full max-w-7xl mx-auto z-10">
    <div x-data="gallery()" class="">
      <div
        class="
          mt-6
          w-full
          max-w-6xl
          mx-auto
          grid
          gap-2
          grid-cols-4 grid-rows-5
          overflow-hidden
          rounded-3xl
        "
      >
        <a
          x-on:click.prevent="open"
          class="block relative bg-red-100 w-full h-32"
          href="/img/gallery/6.jpeg"
        >
          <img
            class="absolute inset-0 w-full h-full object-cover object-center"
            src="/img/gallery/6.jpeg"
            alt=""
            width="282"
            height="128"
          />
        </a>

        <a
          x-on:click.prevent="open"
          class="block relative bg-red-100 row-span-2"
          href="/img/gallery/1.jpeg"
        >
          <img
            class="absolute inset-0 w-full h-full object-cover object-center"
            src="/img/gallery/1.jpeg"
            alt=""
            width="282"
            height="264"
          />
        </a>

        <a
          x-on:click.prevent="open"
          class="block relative bg-red-100 col-span-2 row-span-2"
          href="/img/gallery/9.png"
        >
          <img
            class="absolute inset-0 w-full h-full object-cover object-center"
            src="/img/gallery/9.png"
            alt=""
            width="572"
            height="264"
          />
        </a>

        <a
          x-on:click.prevent="open"
          class="block relative bg-red-100 row-span-2"
          href="/img/gallery/2.jpeg"
        >
          <img
            class="absolute inset-0 w-full h-full object-cover object-center"
            src="/img/gallery/2.jpeg"
            alt=""
            width="282"
            height="264"
          />
        </a>

        <a
          x-on:click.prevent="open"
          class="block relative bg-red-100"
          href="/img/gallery/5.png"
        >
          <img
            class="absolute inset-0 w-full h-full object-cover object-center"
            src="/img/gallery/5.png"
            alt=""
            width="282"
            height="128"
          />
        </a>

        <a
          x-on:click.prevent="open"
          class="block relative bg-red-100 w-full h-32"
          href="/img/gallery/10.jpeg"
        >
          <img
            class="absolute inset-0 w-full h-full object-cover object-center"
            src="/img/gallery/10.jpeg"
            alt=""
            width="282"
            height="128"
          />
        </a>

        <a
          x-on:click.prevent="open"
          class="block relative bg-red-100 row-span-2"
          href="/img/gallery/4.png"
        >
          <img
            class="absolute inset-0 w-full h-full object-cover object-center"
            src="/img/gallery/4.png"
            alt=""
            width="282"
            height="264"
          />
        </a>

        <a
          x-on:click.prevent="open"
          class="block relative bg-red-100 col-span-2 row-span-2"
          href="/img/gallery/7.png"
        >
          <img
            class="absolute inset-0 w-full h-full object-cover object-center"
            src="/img/gallery/7.png"
            alt=""
            width="572"
            height="264"
          />
        </a>

        <a
          x-on:click.prevent="open"
          class="block relative bg-red-100 row-span-2"
          href="/img/gallery/3.jpeg"
        >
          <img
            class="absolute inset-0 w-full h-full object-cover object-center"
            src="/img/gallery/3.jpeg"
            alt=""
            width="282"
            height="264"
          />
        </a>

        <a
          x-on:click.prevent="open"
          class="block relative bg-red-100"
          href="/img/gallery/8.jpeg"
        >
          <img
            class="absolute inset-0 w-full h-full object-cover object-center"
            src="/img/gallery/8.jpeg"
            alt=""
            width="282"
            height="128"
          />
        </a>
      </div>

      <div
        style="display: none"
        x-show="isOpen()"
        x-transition:enter="transition ease-in-out duration-300"
        x-transition:enter-start="opacity-0"
        x-transition:leave="transition ease-in-in duration-300"
        x-transition:leave-end="opacity-0"
        x-on:click="close"
        x-on:keydown.window.escape="close"
        class="
          fixed
          inset-0
          bg-black bg-opacity-90
          flex
          justify-center
          items-center
          z-50
        "
      >
        <img
          x-show="isOpen()"
          x-transition:enter="transition ease-in-out duration-300"
          x-transition:enter-start="opacity-0 transform scale-50"
          x-transition:leave="transition ease-in-in duration-300"
          x-transition:leave-end="opacity-0 transform scale-50"
          class="w-4/5 h-4/5 object-contain object-center"
          x-bind:src="activeImageUrl"
          alt=""
        />
      </div>
    </div>
  </div>
</section>
