<section class="w-full max-w-[90%] mx-auto pb-5 bg-black" data-component-type="Content" data-component-slug="portfolio-template-about-approach-section">
  <!-- GRID: LEFT TEXT + RIGHT IMAGE -->
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
    <!-- LEFT SIDE -->
    <div>
      <!-- TAG -->
      <div class="inline-block py-2 px-5 md:px-6 mb-8 font-['Cabin'] text-[22px] sm:text-[26px] md:text-[32px] font-normal text-white rounded-xl bg-[rgba(10,10,10,0.65)] border border-white/[0.12] backdrop-blur-[18px] w-fit" data-node="approach_tag" data-node-type="text" data-node-label="Approach Tag" data-node-default="Our Approach">
        {{approach_tag}}
      </div>

      <!-- TITLE -->
      <h2 class="font-['Cabin'] text-[34px] sm:text-[40px] md:text-[48px] lg:text-[56px] xl:text-[64px] font-medium leading-[95%] md:leading-[100%] text-white mb-8" data-node="approach_title" data-node-type="text" data-node-label="Approach Title" data-node-default="Strategy always comes before execution.">
        {{approach_title}}
      </h2>

      <!-- ITEM 1 TITLE -->
      <div class="font-['Cabin'] text-[24px] sm:text-[26px] md:text-[28px] lg:text-[30px] xl:text-[32px] font-medium text-white mt-8" data-node="approach_point1_title" data-node-type="text" data-node-label="Point 1 Title" data-node-default="Strategic Clarity">
        {{approach_point1_title}}
      </div>

      <!-- ITEM 1 TEXT -->
      <p class="font-['Cabin'] text-[18px] sm:text-[19px] md:text-[20px] lg:text-[22px] xl:text-[24px] font-normal text-[#7e7e7e] leading-[130%] mt-3 max-w-[700px]" data-node="approach_point1_text" data-node-type="textarea" data-node-label="Point 1 Description" data-node-default="Every decision is rooted in understanding the business model, audience behavior, and the outcome the work must drive.">
        {{approach_point1_text}}
      </p>

      <!-- ITEM 2 TITLE -->
      <div class="font-['Cabin'] text-[24px] sm:text-[26px] md:text-[28px] lg:text-[30px] xl:text-[32px] font-medium text-white mt-8" data-node="approach_point2_title" data-node-type="text" data-node-label="Point 2 Title" data-node-default="Purposeful Execution">
        {{approach_point2_title}}
      </div>

      <!-- ITEM 2 TEXT -->
      <p class="font-['Cabin'] text-[18px] sm:text-[19px] md:text-[20px] lg:text-[22px] xl:text-[24px] font-normal text-[#7e7e7e] leading-[130%] mt-3 max-w-[700px]" data-node="approach_point2_text" data-node-type="textarea" data-node-label="Point 2 Description" data-node-default="Copy, design, and campaigns exist to move users from attention to action. If it doesn't serve a purpose, it doesn't get built.">
        {{approach_point2_text}}
      </p>

      <!-- ITEM 3 TITLE -->
      <div class="font-['Cabin'] text-[24px] sm:text-[26px] md:text-[28px] lg:text-[30px] xl:text-[32px] font-medium text-white mt-8" data-node="approach_point3_title" data-node-type="text" data-node-label="Point 3 Title" data-node-default="Measurable Impact">
        {{approach_point3_title}}
      </div>

      <!-- ITEM 3 TEXT -->
      <p class="font-['Cabin'] text-[18px] sm:text-[19px] md:text-[20px] lg:text-[22px] xl:text-[24px] font-normal text-[#7e7e7e] leading-[130%] mt-3 max-w-[700px]" data-node="approach_point3_text" data-node-type="textarea" data-node-label="Point 3 Description" data-node-default="We value results over opinions. Success is judged by performance, engagement, conversion, and growth.">
        {{approach_point3_text}}
      </p>
    </div>

    <!-- RIGHT SIDE (IMAGE) -->
    <div>
      <img src="{{approach_image}}" alt="Our Approach Image" class="w-full max-h-[400px] sm:max-h-[500px] md:max-h-[600px] lg:max-h-none rounded-2xl object-cover" data-node="approach_image" data-node-type="file" data-node-label="Approach Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765879956/seltrix/templates/portfolio-template/our%20approach.webp">
    </div>
  </div>
</section>