<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">
      <h1
        class="lg:w-2/3 mx-auto text-3xl mx-auto text-left font-medium title-font mb-4 text-gray-900"
      >
        Rental Catalog
      </h1>
      <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 .Site.Params.catalogButtons.home }}
      <a
        class="rounded-xl aspect-[3/2] overflow-hidden"
        href="/catalog/#{{ .categoryName }}"
      >
        <div class="relative h-full max-w-full">
          <p
            class="text-black w-full z-10 text-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-2xl"
          >
            {{ .categoryName }}
          </p>
          <img
            class="h-full max-w-full opacity-50"
            src="{{ .img }}"
            alt="Category {{ .categoryName }}"
          />
        </div>
      </a>
      {{ end }}
    </div>
  </div>
</section>