<section data-component-type="Content" class="w-full bg-white font-manrope py-16 md:py-24 px-6 md:px-12 lg:px-20" data-component-slug="ss-interior-flooring-template-spaces-gallery">
  <div class>
    <!-- Centered Header -->
    <div class="flex flex-col items-center text-center max-w-2xl mx-auto mb-16">
      <span class="bg-[#F8F9FA] w-fit px-4 py-2 rounded-xl text-[#535353] text-base font-medium mb-4" data-node="sg_tagline" data-node-type="text" data-node-label="Tagline" data-node-default="Designed for Spaces">
        {{sg_tagline}}
      </span>
      <h2 class="text-3xl md:text-4xl lg:text-[40px] font-bold text-black leading-tight" data-node="sg_title" data-node-type="textarea" data-node-label="Title" data-node-default="Flooring Solutions Crafted for Real Environments">
        {{sg_title}}
      </h2>
    </div>

    <!-- 3x3 Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-12">
      <!-- Card 1 -->
      <div class="flex flex-col">
        <div class="mb-5 overflow-hidden rounded-2xl">
          <img data-node="sg_1_image" data-node-type="file" data-node-label="Card 1 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696200/seltrix/templates/ss-interior-flooring-template/spaces-gallery-1.jpg" src="{{sg_1_image}}" alt="Space type" class="w-full h-[260px] md:h-[320px] lg:h-[392px] object-cover rounded-xl">
        </div>
        <h3 class="text-xl font-bold text-black mb-2" data-node="sg_1_title" data-node-type="text" data-node-label="Card 1 Title" data-node-default="Utility Areas">
          {{sg_1_title}}
        </h3>
        <p class="text-[#4A6673] text-base leading-relaxed" data-node="sg_1_desc" data-node-type="textarea" data-node-label="Card 1 Description" data-node-default="Moisture-resistant, easy-to-maintain surfaces built for constant movement and everyday functionality.">
          {{sg_1_desc}}
        </p>
      </div>

      <!-- Card 2 -->
      <div class="flex flex-col">
        <div class="mb-5 overflow-hidden rounded-2xl">
          <img data-node="sg_2_image" data-node-type="file" data-node-label="Card 2 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696201/seltrix/templates/ss-interior-flooring-template/spaces-gallery-2.jpg" src="{{sg_2_image}}" alt="Space type" class="w-full h-[260px] md:h-[320px] lg:h-[392px] object-cover rounded-xl">
        </div>
        <h3 class="text-xl font-bold text-black mb-2" data-node="sg_2_title" data-node-type="text" data-node-label="Card 2 Title" data-node-default="Offices & Workspaces">
          {{sg_2_title}}
        </h3>
        <p class="text-[#4A6673] text-base leading-relaxed" data-node="sg_2_desc" data-node-type="textarea" data-node-label="Card 2 Description" data-node-default="Structured patterns and durable materials support productivity and modern aesthetics.">
          {{sg_2_desc}}
        </p>
      </div>

      <!-- Card 3 -->
      <div class="flex flex-col">
        <div class="mb-5 overflow-hidden rounded-2xl">
          <img data-node="sg_3_image" data-node-type="file" data-node-label="Card 3 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696203/seltrix/templates/ss-interior-flooring-template/spaces-gallery-3.jpg" src="{{sg_3_image}}" alt="Space type" class="w-full h-[260px] md:h-[320px] lg:h-[392px] object-cover rounded-xl">
        </div>
        <h3 class="text-xl font-bold text-black mb-2" data-node="sg_3_title" data-node-type="text" data-node-label="Card 3 Title" data-node-default="Hospitality Spaces">
          {{sg_3_title}}
        </h3>
        <p class="text-[#4A6673] text-base leading-relaxed" data-node="sg_3_desc" data-node-type="textarea" data-node-label="Card 3 Description" data-node-default="Sophisticated textures that withstand high foot traffic while maintaining visual elegance.">
          {{sg_3_desc}}
        </p>
      </div>

      <!-- Card 4 -->
      <div class="flex flex-col">
        <div class="mb-5 overflow-hidden rounded-2xl">
          <img data-node="sg_4_image" data-node-type="file" data-node-label="Card 4 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696204/seltrix/templates/ss-interior-flooring-template/spaces-gallery-4.jpg" src="{{sg_4_image}}" alt="Space type" class="w-full h-[260px] md:h-[320px] lg:h-[392px] object-cover rounded-xl">
        </div>
        <h3 class="text-xl font-bold text-black mb-2" data-node="sg_4_title" data-node-type="text" data-node-label="Card 4 Title" data-node-default="Bedrooms">
          {{sg_4_title}}
        </h3>
        <p class="text-[#4A6673] text-base leading-relaxed" data-node="sg_4_desc" data-node-type="textarea" data-node-label="Card 4 Description" data-node-default="Soft finishes and calming palettes bring a sense of quiet comfort and personal retreat.">
          {{sg_4_desc}}
        </p>
      </div>

      <!-- Card 5 -->
      <div class="flex flex-col">
        <div class="mb-5 overflow-hidden rounded-2xl">
          <img data-node="sg_5_image" data-node-type="file" data-node-label="Card 5 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696206/seltrix/templates/ss-interior-flooring-template/spaces-gallery-5.jpg" src="{{sg_5_image}}" alt="Space type" class="w-full h-[260px] md:h-[320px] lg:h-[392px] object-cover rounded-xl">
        </div>
        <h3 class="text-xl font-bold text-black mb-2" data-node="sg_5_title" data-node-type="text" data-node-label="Card 5 Title" data-node-default="Living Rooms">
          {{sg_5_title}}
        </h3>
        <p class="text-[#4A6673] text-base leading-relaxed" data-node="sg_5_desc" data-node-type="textarea" data-node-label="Card 5 Description" data-node-default="Warm textures and natural tones create inviting, comfortable spaces built for everyday living.">
          {{sg_5_desc}}
        </p>
      </div>

      <!-- Card 6 -->
      <div class="flex flex-col">
        <div class="mb-5 overflow-hidden rounded-2xl">
          <img data-node="sg_6_image" data-node-type="file" data-node-label="Card 6 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696207/seltrix/templates/ss-interior-flooring-template/spaces-gallery-6.jpg" src="{{sg_6_image}}" alt="Space type" class="w-full h-[260px] md:h-[320px] lg:h-[392px] object-cover rounded-xl">
        </div>
        <h3 class="text-xl font-bold text-black mb-2" data-node="sg_6_title" data-node-type="text" data-node-label="Card 6 Title" data-node-default="Outdoor Verandas">
          {{sg_6_title}}
        </h3>
        <p class="text-[#4A6673] text-base leading-relaxed" data-node="sg_6_desc" data-node-type="textarea" data-node-label="Card 6 Description" data-node-default="Durable finishes that extend style beyond interiors while withstanding open-air conditions.">
          {{sg_6_desc}}
        </p>
      </div>

      <!-- Card 7 -->
      <div class="flex flex-col">
        <div class="mb-5 overflow-hidden rounded-2xl">
          <img data-node="sg_7_image" data-node-type="file" data-node-label="Card 7 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696208/seltrix/templates/ss-interior-flooring-template/spaces-gallery-7.jpg" src="{{sg_7_image}}" alt="Space type" class="w-full h-[260px] md:h-[320px] lg:h-[392px] object-cover rounded-xl">
        </div>
        <h3 class="text-xl font-bold text-black mb-2" data-node="sg_7_title" data-node-type="text" data-node-label="Card 7 Title" data-node-default="Commercial Interiors">
          {{sg_7_title}}
        </h3>
        <p class="text-[#4A6673] text-base leading-relaxed" data-node="sg_7_desc" data-node-type="textarea" data-node-label="Card 7 Description" data-node-default="High-performance flooring solutions built for scale, strength, and style.">
          {{sg_7_desc}}
        </p>
      </div>

      <!-- Card 8 -->
      <div class="flex flex-col">
        <div class="mb-5 overflow-hidden rounded-2xl">
          <img data-node="sg_8_image" data-node-type="file" data-node-label="Card 8 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696209/seltrix/templates/ss-interior-flooring-template/spaces-gallery-8.jpg" src="{{sg_8_image}}" alt="Space type" class="w-full h-[260px] md:h-[320px] lg:h-[392px] object-cover rounded-xl">
        </div>
        <h3 class="text-xl font-bold text-black mb-2" data-node="sg_8_title" data-node-type="text" data-node-label="Card 8 Title" data-node-default="Retail Spaces">
          {{sg_8_title}}
        </h3>
        <p class="text-[#4A6673] text-base leading-relaxed" data-node="sg_8_desc" data-node-type="textarea" data-node-label="Card 8 Description" data-node-default="Statement flooring designed to enhance brand presence and customer experience.">
          {{sg_8_desc}}
        </p>
      </div>

      <!-- Card 9 -->
      <div class="flex flex-col">
        <div class="mb-5 overflow-hidden rounded-2xl">
          <img data-node="sg_9_image" data-node-type="file" data-node-label="Card 9 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696211/seltrix/templates/ss-interior-flooring-template/spaces-gallery-9.jpg" src="{{sg_9_image}}" alt="Space type" class="w-full h-[260px] md:h-[320px] lg:h-[392px] object-cover rounded-xl">
        </div>
        <h3 class="text-xl font-bold text-black mb-2" data-node="sg_9_title" data-node-type="text" data-node-label="Card 9 Title" data-node-default="Hallways & Corridors">
          {{sg_9_title}}
        </h3>
        <p class="text-[#4A6673] text-base leading-relaxed" data-node="sg_9_desc" data-node-type="textarea" data-node-label="Card 9 Description" data-node-default="Seamless planks and consistent finishes create fluid transitions between spaces.">
          {{sg_9_desc}}
        </p>
      </div>
    </div>
  </div>
</section>