<section
  class="py-5 text-white"
  data-component-type="Content"
>
  <div class="w-[100%] mx-auto">

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 items-center">

      <!-- INTRO BLOCK -->
      <div
        class="text-center md:text-left items-center flex justify-center bg-[#E5DCD2] p-[40px] xl:h-[155px] md:h-[155px] "
    
      >
        <div class="xl:w-[70%]">

          <p
            data-node="progress_tag"
            data-node-type="text"
            data-node-label="Progress Tag"
            data-node-default="PROGRESS"
            class="text-sm uppercase tracking-wider text-[#534931] mb-1"
          >
            {{progress_tag}}
          </p>

          <p
            data-node="progress_heading"
            data-node-type="text"
            data-node-label="Progress Heading"
            data-node-default="Every day we Get Better for You"
            class="text-lg text-[#534931]"
          >
            <b>{{progress_heading}}</b>
          </p>

        </div>
      </div>

      <!-- STAT 1 -->
      <div
        class="text-center bg-[#C3B2A5] p-[40px]"
   
      >
        <p
          data-node="progress_stat_1_value"
          data-node-type="text"
          data-node-label="Served Dishes Count"
          data-node-default="5934"
          class="text-4xl md:text-5xl font-bold mb-2"
        >
          {{progress_stat_1_value}}
        </p>

        <p
          data-node="progress_stat_1_label"
          data-node-type="text"
          data-node-label="Served Dishes Label"
          data-node-default="Served Dishes"
          class="text-sm"
        >
          {{progress_stat_1_label}}
        </p>
      </div>

      <!-- STAT 2 -->
      <div
        class="text-center bg-[#B38E6A] p-[40px]"
    
      >
        <p
          data-node="progress_stat_2_value"
          data-node-type="text"
          data-node-label="Satisfied Customers Count"
          data-node-default="9211"
          class="text-4xl md:text-5xl font-bold mb-2"
        >
          {{progress_stat_2_value}}
        </p>

        <p
          data-node="progress_stat_2_label"
          data-node-type="text"
          data-node-label="Satisfied Customers Label"
          data-node-default="Satisfied Customers"
          class="text-sm"
        >
          {{progress_stat_2_label}}
        </p>
      </div>

      <!-- STAT 3 -->
      <div
        class="text-center bg-[#534931] p-[40px]"
       
      >
        <p
          data-node="progress_stat_3_value"
          data-node-type="text"
          data-node-label="Served Projects Count"
          data-node-default="8672"
          class="text-4xl md:text-5xl font-bold mb-2"
        >
          {{progress_stat_3_value}}
        </p>

        <p
          data-node="progress_stat_3_label"
          data-node-type="text"
          data-node-label="Served Projects Label"
          data-node-default="Served Projects"
          class="text-sm"
        >
          {{progress_stat_3_label}}
        </p>
      </div>

    </div>

  </div>
</section>
