<section data-component-type="Content" class="w-full py-20 px-[24px] pt-0 lg:px-10 md:py-12 md:px-6 sm:py-8 sm:px-4" data-component-slug="clothing-template-fits-highlight">
  
  <div class="w-full max-w-[1728px] mx-auto grid grid-cols-1 lg:grid-cols-[0.8fr_1.2fr] rounded-2xl overflow-hidden bg-[#f5f5f5]">
    <div class="p-12 px-6 lg:p-10 md:p-8 sm:p-6 border border-black border-b-0 lg:border-b lg:border-r-0 rounded-t-2xl lg:rounded-r-none lg:rounded-l-2xl flex flex-col justify-center gap-5 bg-[#f5f5f5]">
      <h2 class="title-stroke font-black italic text-[45px] md:text-[32px] lg:text-[45px] leading-[110%] text-black max-w-full lg:max-w-[400px]" data-node="fits_title" data-node-type="text" data-node-label="Section Title" data-node-default="Fits made for reels, not just mirrors">
        {{fits_title}}
      </h2>

      <p class="font-normal text-sm md:text-base leading-[140%] text-black max-w-full lg:max-w-[400px]" data-node="fits_desc" data-node-type="text" data-node-label="Section Description" data-node-default="Modern street style that stays on rotation- oversized, comfy, and made to be seen.">
        {{fits_desc}}
      </p>

      <a href="{{fits_btn_link}}" class="w-fit h-12 px-6 py-3 rounded-lg bg-[#010609] text-white text-sm no-underline inline-flex items-center justify-center mt-2" data-node="fits_btn_link" data-node-type="page_links" data-node-label="CTA Link" data-node-default="/collections">
        <span data-node="fits_btn_text" data-node-type="text" data-node-default="Build Your Fit">
          {{fits_btn_text}}
        </span>
      </a>
    </div>

    <div class="w-full h-full min-h-[260px] md:min-h-[320px] lg:min-h-[320px]" data-node="fits_image" data-node-type="file" data-node-label="Right Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766744588/seltrix/templates/clothing-template/fits-made.webp">
      <img src="{{fits_image}}" alt="Fits Image" class="w-full h-full object-cover block">
    </div>
  </div>
</section>