<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-products-showcase">
  <div class>
    <!-- Centered Header -->
    <div class="flex flex-col items-center text-center max-w-2xl mx-auto mb-12 lg:mb-16">
      <!-- Tagline -->
      <p class="bg-[#F8F9FA] w-fit px-4 py-2 rounded-xl text-black text-base font-medium mb-6" data-node="showcase_tagline" data-node-type="text" data-node-label="Tagline" data-node-default="Space-Focused Design">
        {{showcase_tagline}}
      </p>

      <!-- Title -->
      <h2 class="text-3xl md:text-4xl lg:text-[40px] font-bold text-black leading-tight" data-node="showcase_title" data-node-type="text" data-node-label="Title" data-node-default="Tailored Flooring Solutions Designed Around Your Style">
        {{showcase_title}}
      </h2>
    </div>

    <!-- 3 Product Cards Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-4 xl:gap-6 md:justify-items-center">
      <!-- Product Card 1 -->
      <div class="flex flex-col">
        <div class="mb-6 overflow-hidden rounded-xl">
          <img data-node="sc_1_image" data-node-type="file" data-node-label="Product 1 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696185/seltrix/templates/ss-interior-flooring-template/showcase-products-1.jpg" src="{{sc_1_image}}" alt="Product showcase" class="w-full h-[280px] md:h-[320px] lg:h-[360px] xl:h-[420px] 2xl:h-[480px] object-cover rounded-xl">
        </div>
        <h3 class="text-xl font-bold text-black mb-3" data-node="sc_1_title" data-node-type="text" data-node-label="Product 1 Title" data-node-default="SPC Straight Plank – Chestnut">
          {{sc_1_title}}
        </h3>
        <p class="text-[#4A6673] text-base leading-relaxed" data-node="sc_1_description" data-node-type="textarea" data-node-label="Product 1 Description" data-node-default="Rich, warm undertones paired with natural wood grain create a grounded, inviting surface.">
          {{sc_1_description}}
        </p>
      </div>

      <!-- Product Card 2 -->
      <div class="flex flex-col">
        <div class="mb-6 overflow-hidden rounded-xl">
          <img data-node="sc_2_image" data-node-type="file" data-node-label="Product 2 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696186/seltrix/templates/ss-interior-flooring-template/showcase-products-2.jpg" src="{{sc_2_image}}" alt="Product showcase" class="w-full h-[280px] md:h-[320px] lg:h-[360px] xl:h-[420px] 2xl:h-[480px] object-cover rounded-xl">
        </div>
        <h3 class="text-xl font-bold text-black mb-3" data-node="sc_2_title" data-node-type="text" data-node-label="Product 2 Title" data-node-default="SPC Straight Plank – Classic Oak">
          {{sc_2_title}}
        </h3>
        <p class="text-[#4A6673] text-base leading-relaxed" data-node="sc_2_description" data-node-type="textarea" data-node-label="Product 2 Description" data-node-default="Subtle movement and refined grain patterns add rhythm & sophistication, enhancing modern interiors.">
          {{sc_2_description}}
        </p>
      </div>

      <!-- Product Card 3 -->
      <div class="flex flex-col md:col-span-2 lg:col-span-1 md:mx-auto md:max-w-[400px] lg:max-w-none">
        <div class="mb-6 overflow-hidden rounded-xl">
          <img data-node="sc_3_image" data-node-type="file" data-node-label="Product 3 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696187/seltrix/templates/ss-interior-flooring-template/showcase-products-3.jpg" src="{{sc_3_image}}" alt="Product showcase" class="w-full h-[280px] md:h-[320px] lg:h-[360px] xl:h-[420px] 2xl:h-[480px] object-cover rounded-xl">
        </div>
        <h3 class="text-xl font-bold text-black mb-3" data-node="sc_3_title" data-node-type="text" data-node-label="Product 3 Title" data-node-default="LVT Straight Planks – White Wash">
          {{sc_3_title}}
        </h3>
        <p class="text-[#4A6673] text-base leading-relaxed" data-node="sc_3_description" data-node-type="textarea" data-node-label="Product 3 Description" data-node-default="Soft, muted textures with a light finish deliver a contemporary look, ideal for minimalist spaces.">
          {{sc_3_description}}
        </p>
      </div>
    </div>
  </div>
</section>