<section data-component-type="Content" class="bg-white py-20 lg:py-24 font-sans text-center" data-component-slug="ss-interior-kitchen-appliances">
  <div class="max-w-[90%]  mx-auto px-4">
    
    <!-- Badge -->
    <div class="flex justify-center mb-8">
        <span data-node="appliances_badge" data-node-type="text" data-node-default="Top Picks" class="inline-block py-1.5 px-6 rounded-full bg-gray-100 text-sm font-medium text-gray-500 border border-gray-200">
        {{appliances_badge}}
        </span>
    </div>

    <!-- Heading -->
    <h2 data-node="appliances_heading" data-node-type="textarea" data-node-label="Heading" data-node-default="Appliances Designed for Everyday Cooking" class="text-3xl sm:text-4xl lg:text-5xl font-bold text-black mb-16 max-w-3xl mx-auto leading-tight">
      {{appliances_heading}}
    </h2>

    <!-- Product Grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-left">
      
      <!-- Card 1 -->
      <div class="group">
        <div class="bg-gray-100 rounded-[2rem] overflow-hidden mb-8 h-[300px] sm:h-[400px] flex items-center justify-center">
            <img data-node="card_1_image" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767779866/seltrix/templates/ss-interior-kitchen/p1.png" src="{{card_1_image}}" alt="Product 1" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
        </div>
        <h3 data-node="card_1_title" data-node-type="text" data-node-default="Atipik Kettle" class="text-2xl font-bold text-black mb-3">
            {{card_1_title}}
        </h3>
        <p data-node="card_1_desc" data-node-type="textarea" data-node-default="Rapid boiling with temperature precision, crafted for effortless daily use." class="text-[#5E5E5E] leading-relaxed text-base">
            {{card_1_desc}}
        </p>
      </div>

      <!-- Card 2 -->
      <div class="group">
        <div class="bg-gray-100 rounded-[2rem] overflow-hidden mb-8 h-[300px] sm:h-[400px] flex items-center justify-center">
            <img data-node="card_2_image" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767779867/seltrix/templates/ss-interior-kitchen/p2.png" src="{{card_2_image}}" alt="Product 2" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
        </div>
        <h3 data-node="card_2_title" data-node-type="text" data-node-default="Multi Beverage Maker" class="text-2xl font-bold text-black mb-3">
            {{card_2_title}}
        </h3>
        <p data-node="card_2_desc" data-node-type="textarea" data-node-default="Versatile brewing for multiple beverages, delivering consistent results." class="text-[#5E5E5E] leading-relaxed text-base">
            {{card_2_desc}}
        </p>
      </div>

      <!-- Card 3 -->
      <div class="group">
         <div class="bg-gray-100 rounded-[2rem] overflow-hidden mb-8 h-[300px] sm:h-[400px] flex items-center justify-center">
            <img data-node="card_3_image" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767779869/seltrix/templates/ss-interior-kitchen/p3.png" src="{{card_3_image}}" alt="Product 3" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
        </div>
        <h3 data-node="card_3_title" data-node-type="text" data-node-default="Signature Coffee Maker" class="text-2xl font-bold text-black mb-3">
            {{card_3_title}}
        </h3>
        <p data-node="card_3_desc" data-node-type="textarea" data-node-default="Rich, aromatic coffee brewed smoothly, designed for balanced flavor." class="text-[#5E5E5E] leading-relaxed text-base">
            {{card_3_desc}}
        </p>
      </div>

    </div>

  </div>
</section>