<section class="bg-black w-full max-w-[90%] mx-auto py-16 md:py-20 lg:py-32" data-component-type="Content" data-component-slug="portfolio-template-solution">
  <!-- TWO COLUMN GRID -->
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-16">
    <!-- LEFT COLUMN -->
    <div>
      <!-- LABEL -->
      <div class="inline-flex justify-center items-center px-6 py-3 mb-10 font-['Cabin'] text-[20px] sm:text-[24px] md:text-[28px] lg:text-[32px] text-white rounded-[13px] bg-white/[0.07] backdrop-blur-[12px] shadow-[inset_0_1px_0_rgba(255,255,255,0.12),inset_0_-1px_0_rgba(0,0,0,0.25)]" data-node="solution_label" data-node-type="text" data-node-default="Solution">
        {{solution_label}}
      </div>

      <!-- TITLE -->
      <h2 class="text-white font-['Cabin'] font-medium text-[28px] sm:text-[36px] md:text-[44px] lg:text-[56px] leading-[105%] max-w-[600px] mb-16" data-node="solution_title" data-node-type="text" data-node-default="Growth system built for real brand problems">
        {{solution_title}}
      </h2>

      <!-- IMAGE -->
      <img src="{{solution_image}}" class="w-full lg:w-[915px] h-auto lg:h-[560px] rounded-[14px] object-cover" data-node="solution_image" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765879865/seltrix/templates/portfolio-template/Frame%20%288%29.webp">
    </div>

    <!-- RIGHT COLUMN -->
    <div class="flex flex-col justify-end lg:-mt-2.5">
      <!-- MAIN PARAGRAPH -->
      <p class="text-[#7E7E7E] text-[16px] sm:text-[18px] md:text-[20px] lg:text-[24px] font-['Cabin'] leading-[140%] max-w-[680px] mb-12" data-node="solution_description" data-node-type="text" data-node-default="Manage all things equity in one place, with Trackz, you get the all-in-one sales and marketing automation platform designed to help your small business grow.">
        {{solution_description}}
      </p>

      <!-- FEATURE 1 -->
      <div class="flex items-center gap-6 mb-14">
        <div class="w-[7px] h-[162px] rounded-[50px] bg-[#CBD5E1]"></div>
        <div class="flex gap-4">
          <img src="{{feature1_icon}}" class="w-[42px] h-[42px] mt-1" data-node="feature1_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767362072/seltrix/templates/portfolio-template/Business%20crm.svg">
          <div class="flex flex-col gap-2">
            <h3 class="text-white font-['Cabin'] text-[22px] sm:text-[24px] md:text-[28px] lg:text-[32px] font-medium" data-node="feature1_title" data-node-type="text" data-node-default="Business CRM">
              {{feature1_title}}
            </h3>
            <p class="text-[#7E7E7E] text-[14px] sm:text-[16px] md:text-[20px] lg:text-[24px] leading-[140%] max-w-[600px]" data-node="feature1_desc" data-node-type="text" data-node-default="Get organized and automate follow-up with Keep's client management software.">
              {{feature1_desc}}
            </p>
          </div>
        </div>
      </div>

      <!-- FEATURE 2 -->
      <div class="flex items-center gap-6 mb-14">
        <div class="w-[7px] h-[162px] rounded-[50px] bg-[#D3FF5B]"></div>
        <div class="flex gap-4">
          <img src="{{feature2_icon}}" class="w-[42px] h-[42px] mt-1" data-node="feature2_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767362080/seltrix/templates/portfolio-template/Email%20Marketing.svg">
          <div class="flex flex-col gap-2">
            <h3 class="text-white font-['Cabin'] text-[22px] sm:text-[24px] md:text-[28px] lg:text-[32px] font-medium" data-node="feature2_title" data-node-type="text" data-node-default="Email Marketing">
              {{feature2_title}}
            </h3>
            <p class="text-[#7E7E7E] text-[14px] sm:text-[16px] md:text-[20px] lg:text-[24px] leading-[140%] max-w-[600px]" data-node="feature2_desc" data-node-type="text" data-node-default="Convert more leads with easy-to-build emails plus automation & CRM.">
              {{feature2_desc}}
            </p>
          </div>
        </div>
      </div>

      <!-- FEATURE 3 -->
      <div class="flex items-center gap-6">
        <div class="w-[7px] h-[162px] rounded-[50px] bg-[#CBD5E1]"></div>
        <div class="flex gap-4">
          <img src="{{feature3_icon}}" class="w-[42px] h-[42px] mt-1" data-node="feature3_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767362115/seltrix/templates/portfolio-template/Sales%20Automation.svg">
          <div class="flex flex-col gap-2">
            <h3 class="text-white font-['Cabin'] text-[22px] sm:text-[24px] md:text-[28px] lg:text-[32px] font-medium" data-node="feature3_title" data-node-type="text" data-node-default="Sales Automation">
              {{feature3_title}}
            </h3>
            <p class="text-[#7E7E7E] text-[14px] sm:text-[16px] md:text-[20px] lg:text-[24px] leading-[140%] max-w-[600px]" data-node="feature3_desc" data-node-type="text" data-node-default="Automation capabilities were built to amplify every stage of your sales cycle.">
              {{feature3_desc}}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>