<section class="w-full bg-black max-w-[90%] mx-auto py-24 md:py-32 lg:py-40 overflow-hidden" data-component-type="Content" data-component-slug="portfolio-template-service-hero">
  <!-- GRID WRAPPER -->
  <div class="grid grid-cols-1 lg:grid-cols-[1.8fr_1fr] gap-6 lg:gap-10 xl:gap-16 items-end">
    <!-- LEFT SIDE CONTENT -->
    <div>
      <div class="inline-block py-2 px-5 md:py-2.5 md:px-6 font-['Cabin'] text-[18px] sm:text-[22px] md:text-[26px] lg:text-[32px] font-normal text-white rounded-xl bg-[rgba(10,10,10,0.65)] backdrop-blur-[18px] border border-white/[0.12]" data-node="about_label" data-node-type="text" data-node-default="For Agencies">
        {{about_label}}
      </div>

      <h2 class="mt-8 font-['Cabin'] text-[28px] sm:text-[42px] md:text-[48px] lg:text-[54px] xl:text-[64px] font-medium leading-[95%] md:leading-[100%] text-white w-full" data-node="about_heading" data-node-type="text" data-node-default="Strategy-led marketing that drive measurable growth.">
        {{about_heading}}
      </h2>
    </div>

    <!-- RIGHT SIDE TEXT -->
    <p class="font-['Cabin'] text-[18px] md:text-[20px] lg:text-[22px] xl:text-[24px] font-normal text-[#7E7E7E] leading-[130%] max-w-[520px] lg:max-w-full" data-node="about_paragraph" data-node-type="text" data-node-default="Every service we offer is designed to solve real business problems. We don't execute blindly. We build systems that work.">
      {{about_paragraph}}
    </p>
  </div>

  <!-- FULL-WIDTH IMAGE -->
  <div class="w-full mt-16">
    <img src="{{about_hero_image}}" class="w-full rounded-xl md:rounded-2xl object-cover" data-node="about_hero_image" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765879929/seltrix/templates/portfolio-template/about-hero.webp">
  </div>
</section>