<section data-component-type="Content" class="bg-white py-16 lg:py-24 " data-component-slug="ss-interior-kitchen-precision_blend">
  <div class="max-w-[90%] mx-auto px-4 sm:px-6 lg:px-8">
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
      
      <!-- Feature 1 -->
      <div class="flex flex-col gap-6">
        <div class="w-12 h-12 bg-[#0019BA] rounded-[10px] flex items-center justify-center">
          <span data-node="item_1_number" data-node-type="text" data-node-label="Number 1" data-node-default="1" class="text-white text-xl font-medium">
            {{item_1_number}}
          </span>
        </div>
        <div>
          <h3 data-node="item_1_title" data-node-type="text" data-node-label="Title 1" data-node-default="Precision Blend" class="text-xl font-bold text-gray-900 mb-3">
            {{item_1_title}}
          </h3>
          <p data-node="item_1_description" data-node-type="textarea" data-node-label="Description 1" data-node-default="Smooth, powerful blending for daily recipes, sauces, and mixes with consistent results." class="text-[#5E5E5E] leading-relaxed">
            {{item_1_description}}
          </p>
        </div>
      </div>

      <!-- Feature 2 -->
      <div class="flex flex-col gap-6">
        <div class="w-12 h-12 bg-[#0019BA]  rounded-[10px] flex items-center justify-center">
          <span data-node="item_2_number" data-node-type="text" data-node-label="Number 2" data-node-default="2" class="text-white text-xl font-medium">
            {{item_2_number}}
          </span>
        </div>
        <div>
          <h3 data-node="item_2_title" data-node-type="text" data-node-label="Title 2" data-node-default="Steam Perfect" class="text-xl font-bold text-gray-900 mb-3">
            {{item_2_title}}
          </h3>
          <p data-node="item_2_description" data-node-type="textarea" data-node-label="Description 2" data-node-default="Fluffy, even rice every time through smart heating and simple one-touch control." class="text-[#5E5E5E] leading-relaxed">
            {{item_2_description}}
          </p>
        </div>
      </div>

      <!-- Feature 3 -->
      <div class="flex flex-col gap-6">
        <div class="w-12 h-12 bg-[#0019BA]  rounded-[10px] flex items-center justify-center">
          <span data-node="item_3_number" data-node-type="text" data-node-label="Number 3" data-node-default="3" class="text-white text-xl font-medium">
            {{item_3_number}}
          </span>
        </div>
        <div>
          <h3 data-node="item_3_title" data-node-type="text" data-node-label="Title 3" data-node-default="Pure Flow" class="text-xl font-bold text-gray-900 mb-3">
            {{item_3_title}}
          </h3>
          <p data-node="item_3_description" data-node-type="textarea" data-node-label="Description 3" data-node-default="Advanced filtration that delivers clean, safe, great-tasting water for your home." class="text-[#5E5E5E] leading-relaxed">
            {{item_3_description}}
          </p>
        </div>
      </div>

      <!-- Feature 4 -->
      <div class="flex flex-col gap-6">
        <div class="w-12 h-12 bg-[#0019BA]  rounded-[10px] flex items-center justify-center">
          <span data-node="item_4_number" data-node-type="text" data-node-label="Number 4" data-node-default="4" class="text-white text-xl font-medium">
            {{item_4_number}}
          </span>
        </div>
        <div>
          <h3 data-node="item_4_title" data-node-type="text" data-node-label="Title 4" data-node-default="Turbo Crisp" class="text-xl font-bold text-gray-900 mb-3">
            {{item_4_title}}
          </h3>
          <p data-node="item_4_description" data-node-type="textarea" data-node-label="Description 4" data-node-default="Faster, healthier cooking with crisp, golden results for everyday meals and snacks." class="text-[#5E5E5E] leading-relaxed">
            {{item_4_description}}
          </p>
        </div>
      </div>

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