<section class="w-full bg-black max-w-[90%] mx-auto py-12 md:py-24 lg:py-12" data-component-type="Content" data-component-slug="portfolio-template-metrics">
  <!-- 4-COLUMN METRICS SECTION -->
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-10 lg:gap-16">
    <!-- ITEM 1 -->
    <div class="metrics-item" data-node-label="Metric 1">
      <div class="font-['Cabin'] font-normal text-[20px] sm:text-[24px] md:text-[28px] lg:text-[32px] leading-[100%] text-white mb-3" data-node="metric1_title" data-node-type="text" data-node-label="Metric 1 Title" data-node-default="Marketing Analytics">
        {{metric1_title}}
      </div>

      <div class="font-['Cabin'] font-normal text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] leading-[140%] text-[#7E7E7E]" data-node="metric1_desc" data-node-type="text" data-node-label="Metric 1 Description" data-node-default="Measure performance across channels with actionable insights.">
        {{metric1_desc}}
      </div>
    </div>

    <!-- ITEM 2 -->
    <div class="metrics-item" data-node-label="Metric 2">
      <div class="font-['Cabin'] font-normal text-[20px] sm:text-[24px] md:text-[28px] lg:text-[32px] leading-[100%] text-white mb-3" data-node="metric2_title" data-node-type="text" data-node-label="Metric 2 Title" data-node-default="SEO & Research">
        {{metric2_title}}
      </div>

      <div class="font-['Cabin'] font-normal text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] leading-[140%] text-[#7E7E7E]" data-node="metric2_desc" data-node-type="text" data-node-label="Metric 2 Description" data-node-default="Understand demand, competition, and search intent precisely.">
        {{metric2_desc}}
      </div>
    </div>

    <!-- ITEM 3 -->
    <div class="metrics-item" data-node-label="Metric 3">
      <div class="font-['Cabin'] font-normal text-[20px] sm:text-[24px] md:text-[28px] lg:text-[32px] leading-[100%] text-white mb-3" data-node="metric3_title" data-node-type="text" data-node-label="Metric 3 Title" data-node-default="Automation">
        {{metric3_title}}
      </div>

      <div class="font-['Cabin'] font-normal text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] leading-[140%] text-[#7E7E7E]" data-node="metric3_desc" data-node-type="text" data-node-label="Metric 3 Description" data-node-default="Streamlines campaigns, lead nurturing, and reporting.">
        {{metric3_desc}}
      </div>
    </div>

    <!-- ITEM 4 -->
    <div class="metrics-item" data-node-label="Metric 4">
      <div class="font-['Cabin'] font-normal text-[20px] sm:text-[24px] md:text-[28px] lg:text-[32px] leading-[100%] text-white mb-3" data-node="metric4_title" data-node-type="text" data-node-label="Metric 4 Title" data-node-default="Design Collaboration">
        {{metric4_title}}
      </div>

      <div class="font-['Cabin'] font-normal text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] leading-[140%] text-[#7E7E7E]" data-node="metric4_desc" data-node-type="text" data-node-label="Metric 4 Description" data-node-default="Fast execution without creative compromise.">
        {{metric4_desc}}
      </div>
    </div>
  </div>
</section>