<section class="bg-[#FDFDF9] py-16 md:py-24 font-['Cormorant',_serif]" data-component-type="Content" data-component-slug="ss-photography-works">
  <div class="max-w-[1400px] mx-auto px-5 grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
    <!-- LEFT CONTENT: TEXT BLOCK -->
    <div class="flex flex-col items-start text-left order-2 lg:order-1">
      <!-- BADGE -->
      <span data-node="works_badge" data-node-type="text" data-node-label="Badge Text" data-node-default="OUR BEST WORKS" class="inline-block bg-[#1A1A1A] text-white text-[10px] md:text-[11px] font-sans font-bold tracking-widest px-3 py-1.5 rounded-sm mb-6">
        {{works_badge}}
      </span>

      <!-- HEADING -->
      <h2 data-node="works_heading" data-node-type="text" data-node-label="Main Heading" data-node-default="Photography That Speaks Before You Do." class="text-[#2D2D2D] text-[40px] md:text-[56px] lg:text-[64px] leading-[1.1] mb-8 lg:mb-32">
        {{works_heading}}
      </h2>

      <!-- SUBHEADING & DESCRIPTION -->
      <div class="mt-auto">
        <h3 data-node="works_subheading" data-node-type="text" data-node-label="Subheading" data-node-default="Trusted by 2k+ clients and brands." class="text-[#1A1A1A] font-sans text-[20px] md:text-[24px] font-medium mb-4">
          {{works_subheading}}
        </h3>
        <p data-node="works_description" data-node-type="text" data-node-label="Description" data-node-default="A handpicked showcase of defining moments, images rich with emotion, striking detail, and stories captured in their purest form. Each frame reflects artistry shaped by vision, light, and real human connection." class="text-[#5A5A5A] font-sans text-[15px] md:text-[16px] leading-relaxed max-w-[500px]">
          {{works_description}}
        </p>
      </div>
    </div>

    <!-- RIGHT CONTENT: MASONRY GRID -->
    <div class="order-1 lg:order-2 grid grid-cols-2 gap-4 md:gap-6">
      <!-- COLUMN 1 -->
      <div class="flex flex-col gap-4 md:gap-6">
        <!-- IMAGE 1 -->
        <div class="relative overflow-hidden rounded-xl aspect-[4/3] group">
          <img data-node="work_image_1" data-node-type="file" data-node-label="Work Image 1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767440986/seltrix/templates/ss-photography/work-1.svg" src="{{work_image_1}}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" alt="Work 1">
        </div>
        <!-- IMAGE 2 -->
        <div class="relative overflow-hidden rounded-xl aspect-[3/4] group">
          <img data-node="work_image_2" data-node-type="file" data-node-label="Work Image 2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767440988/seltrix/templates/ss-photography/work-2.svg" src="{{work_image_2}}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" alt="Work 2">
        </div>
        <!-- IMAGE 3 -->
        <div class="relative overflow-hidden rounded-xl aspect-square group">
          <img data-node="work_image_3" data-node-type="file" data-node-label="Work Image 3" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767440990/seltrix/templates/ss-photography/work-3.svg" src="{{work_image_3}}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" alt="Work 3">
        </div>
      </div>

      <!-- COLUMN 2 -->
      <div class="flex flex-col gap-4 md:gap-6 pt-0 md:pt-12">
        <!-- IMAGE 4 -->
        <div class="relative overflow-hidden rounded-xl aspect-square group">
          <img data-node="work_image_4" data-node-type="file" data-node-label="Work Image 4" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767440993/seltrix/templates/ss-photography/work-4.svg" src="{{work_image_4}}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" alt="Work 4">
        </div>
        <!-- IMAGE 5 -->
        <div class="relative overflow-hidden rounded-xl aspect-[3/4] group">
          <img data-node="work_image_5" data-node-type="file" data-node-label="Work Image 5" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767440995/seltrix/templates/ss-photography/work-5.svg" src="{{work_image_5}}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" alt="Work 5">
        </div>
        <!-- IMAGE 6 -->
        <div class="relative overflow-hidden rounded-xl aspect-[4/3] group">
          <img data-node="work_image_6" data-node-type="file" data-node-label="Work Image 6" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767440998/seltrix/templates/ss-photography/work-6.svg" src="{{work_image_6}}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" alt="Work 6">
        </div>
      </div>
    </div>
  </div>
</section>