
<section data-component-type="Content">
  <section class="bg-[#F6F6F6] py-16 px-4">
    <div class="max-w-[90%] mx-auto">

      <!-- TITLE -->
      <h2
        class="text-3xl sm:text-4xl font-bold text-black max-w-xl mb-12"
        data-node="impact_heading"
        data-node-type="text"
        data-node-label="Impact Section Heading"
        data-node-default="Learning Designed For Real-World Impact"
      >
        {{impact_heading}}
      </h2>

      <!-- FEATURES GRID -->
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10">

        <!-- ITEM 1 -->
        <div class="flex flex-col gap-4 border-r border-[#DCDCDC]">
          <span
            class="w-9 h-9 flex items-center justify-center bg-emerald-600 text-white font-semibold rounded-md"
            data-node="impact_item_1_number"
            data-node-type="text"
            data-node-label="Item 1 Number"
            data-node-default="1"
          >
            {{impact_item_1_number}}
          </span>

          <h4
            class="text-lg font-semibold text-black"
            data-node="impact_item_1_title"
            data-node-type="text"
            data-node-label="Item 1 Title"
            data-node-default="Interactive Lessons"
          >
            {{impact_item_1_title}}
          </h4>

          <p
            class="text-[#6C6C6C] text-sm leading-relaxed"
            data-node="impact_item_1_description"
            data-node-type="text"
            data-node-label="Item 1 Description"
            data-node-default="Engaging sessions that keep you hooked and help you retain more."
          >
            {{impact_item_1_description}}
          </p>
        </div>

        <!-- ITEM 2 -->
        <div class="flex flex-col gap-4 border-r border-[#DCDCDC]">
          <span
            class="w-9 h-9 flex items-center justify-center bg-emerald-600 text-white font-semibold rounded-md"
            data-node="impact_item_2_number"
            data-node-type="text"
            data-node-label="Item 2 Number"
            data-node-default="2"
          >
            {{impact_item_2_number}}
          </span>

          <h4
            class="text-lg font-semibold text-black"
            data-node="impact_item_2_title"
            data-node-type="text"
            data-node-label="Item 2 Title"
            data-node-default="Practical Projects"
          >
            {{impact_item_2_title}}
          </h4>

          <p
            class="text-[#6C6C6C] text-sm leading-relaxed"
            data-node="impact_item_2_description"
            data-node-type="text"
            data-node-label="Item 2 Description"
            data-node-default="Hands-on tasks designed to build confidence and real experience."
          >
            {{impact_item_2_description}}
          </p>
        </div>

        <!-- ITEM 3 -->
        <div class="flex flex-col gap-4 border-r border-[#DCDCDC]">
          <span
            class="w-9 h-9 flex items-center justify-center bg-emerald-600 text-white font-semibold rounded-md"
            data-node="impact_item_3_number"
            data-node-type="text"
            data-node-label="Item 3 Number"
            data-node-default="3"
          >
            {{impact_item_3_number}}
          </span>

          <h4
            class="text-lg font-semibold text-black"
            data-node="impact_item_3_title"
            data-node-type="text"
            data-node-label="Item 3 Title"
            data-node-default="Expert Guidance"
          >
            {{impact_item_3_title}}
          </h4>

          <p
            class="text-[#6C6C6C] text-sm leading-relaxed"
            data-node="impact_item_3_description"
            data-node-type="text"
            data-node-label="Item 3 Description"
            data-node-default="Get direction from professionals who’ve mastered their craft."
          >
            {{impact_item_3_description}}
          </p>
        </div>

        <!-- ITEM 4 -->
        <div class="flex flex-col gap-4 border-r border-[#DCDCDC]">
          <span
            class="w-9 h-9 flex items-center justify-center bg-emerald-600 text-white font-semibold rounded-md"
            data-node="impact_item_4_number"
            data-node-type="text"
            data-node-label="Item 4 Number"
            data-node-default="4"
          >
            {{impact_item_4_number}}
          </span>

          <h4
            class="text-lg font-semibold text-black"
            data-node="impact_item_4_title"
            data-node-type="text"
            data-node-label="Item 4 Title"
            data-node-default="Skill Assessments"
          >
            {{impact_item_4_title}}
          </h4>

          <p
            class="text-[#6C6C6C] text-sm leading-relaxed"
            data-node="impact_item_4_description"
            data-node-type="text"
            data-node-label="Item 4 Description"
            data-node-default="Track your progress with quick evaluations and improve faster."
          >
            {{impact_item_4_description}}
          </p>
        </div>

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