<section data-component-type="Content" class="bg-white md:py-[20px] py-[10px] lg:py-[30px] " data-component-slug="ss-interior-kitchen-product_categories">
  <div class="max-w-[90%] mx-auto px-4 sm:px-6 lg:px-8">
    
    <!-- Header Section -->
    <div class="flex flex-col lg:flex-row gap-10 lg:items-end justify-between mb-16">
      <div class="lg:max-w-[45%]">
        <span data-node="categories_badge" data-node-type="text" data-node-label="Badge Text" data-node-default="PRODUCT CATEGORIES" class="inline-block py-2 px-4 rounded-full border border-gray-200
          text-xs font-semibold tracking-wider bg-gray-100 text-[#666666] mb-6 uppercase">
          {{categories_badge}}
        </span>
        <h2 data-node="categories_heading" data-node-type="textarea" data-node-label="Heading" data-node-default="Everything You Need for a Modern Kitchen." class="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 leading-tight">
          {{categories_heading}}
        </h2>
      </div>
      
      <div class="max-w-lg">
        <p data-node="categories_description" data-node-type="textarea" data-node-label="Description" data-node-default="Smart tools, refined materials, and high-performance appliances crafted to elevate every moment in the kitchen, making cooking smoother, spaces sleeker, and everyday living effortlessly elegant." class="text-lg text-[#5E5E5E] leading-relaxed">
          {{categories_description}}
        </p>
      </div>
    </div>

    <!-- Bento Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-8">
      
      <!-- Left Column (Stacked Images) -->
      <div class="flex flex-col gap-6 lg:gap-8">
        <!-- Image 1 -->
        <div class="w-full h-[324px] lg:h-[700px] rounded-[32px] overflow-hidden relative group">
          <img data-node="cat_image_1" data-node-type="file" data-node-label="Category Image 1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767779850/seltrix/templates/ss-interior-kitchen/imgl.png" src="{{cat_image_1}}" alt="Category 1" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
           <div class="absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors duration-500"></div>
        </div>
        
      
      </div>

      <!-- Right Column (Tall Image) -->
      <div class="w-full md:h-[624px] h-[324px] lg:h-[700px] rounded-[32px] overflow-hidden relative group">
        <img data-node="cat_image_2" data-node-type="file" data-node-label="Category Image 2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767779852/seltrix/templates/ss-interior-kitchen/imgr.png" src="{{cat_image_2}}" alt="Category 2" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
        <div class="absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors duration-500"></div>
      </div>

    </div>

  </div>
</section>