<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-showcase">
  <div class>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <!-- Showcase Card 1 -->
      <div class="relative overflow-hidden rounded-xl group">
        <img data-node="showcase_1_image" data-node-type="file" data-node-label="Showcase 1 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696181/seltrix/templates/ss-interior-flooring-template/showcase-1.png" src="{{showcase_1_image}}" alt="Interior showcase" class="w-full h-[480px] md:h-[640px] lg:h-[800px] xl:h-[960px] object-cover group-hover:scale-105 transition-transform duration-500">
        <!-- Gradient Overlay -->
        <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>
        <!-- Content -->
        <div class="absolute bottom-0 left-0 right-0 p-6 md:p-8">
          <h3 class="text-xl md:text-2xl font-bold text-white mb-3" data-node="showcase_1_title" data-node-type="text" data-node-label="Showcase 1 Title" data-node-default="Deep Walnut Elegance">
            {{showcase_1_title}}
          </h3>
          <p class="text-white/90 text-sm md:text-base leading-relaxed" data-node="showcase_1_description" data-node-type="textarea" data-node-label="Showcase 1 Description" data-node-default="A bold, polished surface that brings warmth and luxury to modern living rooms. Perfect for creating rich, inviting spaces with a contemporary edge.">
            {{showcase_1_description}}
          </p>
        </div>
      </div>

      <!-- Showcase Card 2 -->
      <div class="relative overflow-hidden rounded-xl group">
        <img data-node="showcase_2_image" data-node-type="file" data-node-label="Showcase 2 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696184/seltrix/templates/ss-interior-flooring-template/showcase-2.jpg" src="{{showcase_2_image}}" alt="Interior showcase" class="w-full h-[480px] md:h-[640px] lg:h-[800px] xl:h-[960px] object-cover group-hover:scale-105 transition-transform duration-500">
        <!-- Gradient Overlay -->
        <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>
        <!-- Content -->
        <div class="absolute bottom-0 left-0 right-0 p-6 md:p-8">
          <h3 class="text-xl md:text-2xl font-bold text-white mb-3" data-node="showcase_2_title" data-node-type="text" data-node-label="Showcase 2 Title" data-node-default="Soft Beige Serenity">
            {{showcase_2_title}}
          </h3>
          <p class="text-white/90 text-sm md:text-base leading-relaxed" data-node="showcase_2_description" data-node-type="textarea" data-node-label="Showcase 2 Description" data-node-default="Light, airy tones that brighten any space with a minimalist, calming charm. Ideal for open, breezy interiors that feel refined yet effortless.">
            {{showcase_2_description}}
          </p>
        </div>
      </div>
    </div>
  </div>
</section>