<section data-component-type="Content" class="w-full py-[100px] px-[24px] lg:py-20 lg:px-10 md:py-1.5 md:px-6 sm:px-4 bg-white" data-component-slug="clothing-template-loud-real">
  

  <div class="max-w-[1728px] mx-auto grid grid-cols-[1.2fr_1fr] lg:grid-cols-1 gap-8">
    <!-- Left Image -->
    <div class="rounded-2xl overflow-hidden" data-node="left_image" data-node-type="file" data-node-label="Left Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766744570/seltrix/templates/clothing-template/about%20left.jpg">
      <img src="{{left_image}}" alt="Left Visual" class="w-full h-full object-cover block">
    </div>

    <!-- Right Cards -->
    <div class="grid grid-rows-2 lg:grid-rows-none gap-8">
      <!-- Top Card -->
      <div class="rounded-2xl p-12 md:p-8 flex flex-col justify-end bg-cover bg-center bg-no-repeat text-black" style="background-image: url('{{right_top_bg}}');" data-node="right_top_bg" data-node-type="file" data-node-label="Right Top Background" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766744614/seltrix/templates/clothing-template/loud-live.jpg">
        <h3 class="title-stroke font-black text-[56px] lg:text-[48px] md:text-[36px] leading-none max-w-[580px] mb-5" data-node="right_top_title" data-node-type="text" data-node-label="Top Card Title" data-node-default="For the ones who dress loud and live louder.">
          {{right_top_title}}
        </h3>
        <p class="text-xl md:text-base leading-none max-w-[520px]" data-node="right_top_desc" data-node-type="text" data-node-label="Top Card Description" data-node-default="Exclusive edits, early alerts, and curated looks built for your vibe. Your next best fit? Already lined up.">
          {{right_top_desc}}
        </p>
      </div>

      <!-- Bottom Card (Dark) -->
      <div class="rounded-2xl p-12 md:p-8 flex flex-col justify-end bg-cover bg-center bg-no-repeat text-white" style="background-image: url('{{right_bottom_bg}}');" data-node="right_bottom_bg" data-node-type="file" data-node-label="Right Bottom Background" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766744628/seltrix/templates/clothing-template/real%20style.jpg">
        <h3 class="title-stroke font-black text-[56px] lg:text-[48px] md:text-[36px] leading-none max-w-[580px] mb-5" data-node="right_bottom_title" data-node-type="text" data-node-label="Bottom Card Title" data-node-default="As real style never hits the pause button.">
          {{right_bottom_title}}
        </h3>
        <p class="text-xl md:text-base leading-none max-w-[520px]" data-node="right_bottom_desc" data-node-type="text" data-node-label="Bottom Card Description" data-node-default="Get constant access to fresh drops, upgrades, and community perks. Flex every day, no off-season.">
          {{right_bottom_desc}}
        </p>
      </div>
    </div>
  </div>
</section>