<section data-component-type="Gallery" class="w-full bg-white font-manrope py-16 md:py-20 lg:py-24 px-6 md:px-12 lg:px-20" data-component-slug="ss-interior-flooring-template-gallery">
  <div class>
    <!-- Centered Header -->
    <div class="text-center max-w-xl mx-auto mb-12 lg:mb-16">
      <h2 class="text-3xl md:text-4xl lg:text-[40px] font-bold text-gray-900 leading-tight mb-6" data-node="gallery_title" data-node-type="text" data-node-label="Gallery Title" data-node-default="Every Texture Tells a Story Woven Into Your Space">
        {{gallery_title}}
      </h2>
      <p class="text-[#535353] text-base leading-relaxed mb-10" data-node="gallery_description" data-node-type="textarea" data-node-label="Gallery Description" data-node-default="The right flooring transforms any room from serene minimalism to bold, modern warmth.">
        {{gallery_description}}
      </p>
    </div>

    <!-- Image Gallery Grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 lg:gap-6">
      <!-- Image 1 -->
      <div class="overflow-hidden rounded-lg">
        <img data-node="gallery_image_1" data-node-type="file" data-node-label="Gallery Image 1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696150/seltrix/templates/ss-interior-flooring-template/gallery-1.png" src="{{gallery_image_1}}" alt="Interior flooring showcase" class="w-full h-[280px] md:h-[320px] lg:h-[720px] object-cover hover:scale-105 transition-transform duration-500">
      </div>

      <!-- Image 2 -->
      <div class="overflow-hidden rounded-lg">
        <img data-node="gallery_image_2" data-node-type="file" data-node-label="Gallery Image 2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696151/seltrix/templates/ss-interior-flooring-template/gallery-2.png" src="{{gallery_image_2}}" alt="Interior flooring showcase" class="w-full h-[280px] md:h-[320px] lg:h-[720px] object-cover hover:scale-105 transition-transform duration-500">
      </div>

      <!-- Image 3 -->
      <div class="overflow-hidden rounded-lg">
        <img data-node="gallery_image_3" data-node-type="file" data-node-label="Gallery Image 3" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696153/seltrix/templates/ss-interior-flooring-template/gallery-3.png" src="{{gallery_image_3}}" alt="Interior flooring showcase" class="w-full h-[280px] md:h-[320px] lg:h-[720px] object-cover hover:scale-105 transition-transform duration-500">
      </div>
    </div>
  </div>
</section>