<section data-component-type="Content" data-component-slug="ss-education-template-Learning_designed">
  <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>