<section data-component-type="Content" class="w-full py-12 lg:py-16 bg-white" data-component-slug="home-appliances-everyday-home">
  <div class="max-w-[90%] mx-auto px-4">
    <!-- Grid Container -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 h-auto lg:h-[600px]">
      
      <!-- Column 1: Essentials (Light Background) -->
      <div class="group relative rounded-lg overflow-hidden bg-[#EEEFF1] h-full min-h-[400px] 
      flex flex-col items-center justify-center p-8 text-center">
        <!-- Image Container -->
        <div class="relative w-full h-[250px] lg:h-[300px] mb-8">
             <img data-node="col1_img" data-node-type="file" data-node-label="Column 1 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046123/seltrix/templates/home-appliances-template/appliances-collage.png" src="{{col1_img}}" alt="Home Essentials" class="w-full h-full object-contain transform group-hover:scale-105 transition-transform duration-500">
        </div>
       
        <!-- Content -->
        <div class="z-10">
          <h2 data-node="col1_title" data-node-type="text" data-node-label="Column 1 Title" data-node-default="Everyday Home Essentials" class="text-3xl font-bold text-[#1E293B] mb-3 whitespace-pre-line">{{col1_title}}</h2>
          <p data-node="col1_desc" data-node-type="textarea" data-node-label="Column 1 Description" data-node-default="Reliable appliances made for simple, effortless living" class="text-gray-500">{{col1_desc}}</p>
        </div>
      </div>

      <!-- Column 2: Quick Cooking (Dark Image Background) -->
      <div class="group relative rounded-lg overflow-hidden h-full min-h-[400px]">
        <!-- Background Image -->
         <img data-node="col2_bg" data-node-type="file" data-node-label="Column 2 Background" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046121/seltrix/templates/home-appliances-template/air-fryer-bg.jpg" src="{{col2_bg}}" alt="Air Fryer" class="absolute inset-0 w-full h-full object-cover">
        <!-- Overlay Gradient -->
        <div class="absolute inset-0 bg-gradient-to-b from-black/60 via-transparent to-black/20"></div>

        <!-- Content -->
        <div class="relative z-10 p-8 h-full flex flex-col justify-start">
           <h3 data-node="col2_title" data-node-type="textarea" data-node-label="Column 2 Title" data-node-default="Quick cooking with delicious, guilt-free results." class="text-2xl font-medium text-white mb-2 whitespace-pre-line">{{col2_title}}</h3>
          
          <p data-node="col2_subtitle" data-node-type="text" data-node-label="Column 2 Subtitle" data-node-default="Fast. Crisp. Healthy." class="text-gray-200 text-sm font-light">{{col2_subtitle}}</p>
        </div>
      </div>

      <!-- Column 3: Split Column -->
      <div class="flex flex-col gap-6 h-full">
        
        <!-- Top Half: Kitchen Power Zone -->
         <div class="group relative rounded-lg overflow-hidden flex-1 min-h-[200px]">
             <!-- Background Image -->
            <img data-node="col3_top_bg" data-node-type="file" data-node-label="Column 3 Top Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046173/seltrix/templates/home-appliances-template/kitchen-zone.jpg" src="{{col3_top_bg}}" alt="Kitchen Zone" class="absolute inset-0 w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700">
             <!-- Overlay -->
            <div class="absolute inset-0 bg-black/30 group-hover:bg-black/20 transition-colors"></div>
            
            <div class="relative z-10 p-6">
                <h3 data-node="col3_top_title" data-node-type="text" data-node-label="Column 3 Top Title" data-node-default="Kitchen Power Zone" class="text-xl font-medium text-white">{{col3_top_title}}</h3>
            </div>
         </div>

        <!-- Bottom Half: Smart Living Hub -->
         <div class="group relative rounded-lg overflow-hidden flex-1 min-h-[200px]">
            <!-- Background Image -->
             <img data-node="col3_btm_bg" data-node-type="file" data-node-label="Column 3 Bottom Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046210/seltrix/templates/home-appliances-template/smart-hub.jpg" src="{{col3_btm_bg}}" alt="Smart Living" class="absolute inset-0 w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700">
             <!-- Overlay -->
            <div class="absolute inset-0 bg-black/30 group-hover:bg-black/20 transition-colors"></div>

             <div class="relative z-10 p-6">
                <h3 data-node="col3_btm_title" data-node-type="text" data-node-label="Column 3 Bottom Title" data-node-default="Smart Living Hub" class="text-xl font-medium text-white">{{col3_btm_title}}</h3>
            </div>
         </div>

      </div>

    </div>
  </div>
</section>