<section class="bg-white text-gray-600 body-font">
  <div class="container px-5 py-24 mx-auto">
    <div class="flex flex-col w-full mb-20">
      <p
        class="lg:w-2/3 mx-auto text-3xl mx-auto text-left font-medium title-font mb-4 text-gray-900"
      >
        Rental Catalog
      </p>
      <p class="lg:w-2/3 text-gray-600 mx-auto leading-relaxed text-base">
        Browse our extensive catalog of wedding structures to find the perfect
        setting for your special day. Our structures are designed to provide a
        stunning backdrop for your ceremony and reception, ensuring an
        unforgettable experience for you and your guests.
      </p>
    </div>
    <div
      class="pb-16 max-w-[1000px] grid grid-cols-1 gap-4 mx-auto md:grid-cols-2 lg:grid-cols-3"
    >
      {{ range .Params.catalogButtons.home }}
      <a
        class="rounded-md aspect-[3/2] overflow-hidden group relative inline-block overflow-hidden hover:scale-[1.02] duratoin-100 transition-all focus:outline-none focus:ring"
        href="/catalog/#{{ .categoryName }}"
      >
        <span
          class="absolute inset-x-0 z-10 top-0 h-[1px] bg-black opacity-70 transition-all group-hover:h-full group-active:bg-gray-700"
        ></span>
        <div class="relative h-full max-w-full">
          <span
            class="text-white font-bold w-full z-10 text-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-3xl"
          >
            {{ .categoryName }}
          </span>

          <img
            class="min-h-full h-auto w-full opacity-90"
            src="{{ .img }}"
            loading="lazy"
            alt="Category {{ .categoryName }}"
            style="{{ .style | safeCSS }} filter: brightness(60%);"
          />
        </div>
      </a>
      {{ end }}
    </div>
  </div>
</section>