<section class="bg-[#FDFDF9] font-['Cormorant',_serif] pb-20" data-component-type="Content" data-component-slug="ss-photography-gallery">
  <!-- MARQUEE STRIP -->
  <div class="bg-[#1A1A1A] py-2 md:py-2 overflow-hidden">
    <div class="flex items-center gap-8 md:gap-12 animate-marquee whitespace-nowrap min-w-full">
      <!-- Repeated content for marquee -->
      <div class="flex items-center gap-8 md:gap-12">
        <span data-node="marquee_1" data-node-type="text" data-node-label="Marquee 1" data-node-default="Event Photography" class="text-[#D4D4D4] text-[12px] md:text-[14px] font-sans tracking-[0.2em] uppercase">
          {{marquee_1}}
        </span>
        <img data-node="marquee_icon" data-node-type="file" data-node-label="Marquee Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767440974/seltrix/templates/ss-photography/star.svg" src="{{marquee_icon}}" class="w-6 h-6 md:w-7 md:h-7 opacity-70" alt="★">
        <span data-node="marquee_2" data-node-type="text" data-node-label="Marquee 2" data-node-default="Commercial Photography" class="text-[#D4D4D4] text-[12px] md:text-[14px] font-sans tracking-[0.2em] uppercase">
          {{marquee_2}}
        </span>
        <img src="{{marquee_icon}}" class="w-6 h-6 md:w-7 md:h-7 opacity-70" alt="★">
        <span data-node="marquee_3" data-node-type="text" data-node-label="Marquee 3" data-node-default="Product Photography" class="text-[#D4D4D4] text-[12px] md:text-[14px] font-sans tracking-[0.2em] uppercase">
          {{marquee_3}}
        </span>
        <img src="{{marquee_icon}}" class="w-6 h-6 md:w-7 md:h-7 opacity-70" alt="★">
        <span data-node="marquee_4" data-node-type="text" data-node-label="Marquee 4" data-node-default="Wedding Photography" class="text-[#D4D4D4] text-[12px] md:text-[14px] font-sans tracking-[0.2em] uppercase">
          {{marquee_4}}
        </span>
        <img src="{{marquee_icon}}" class="w-6 h-6 md:w-7 md:h-7 opacity-70" alt="★">
        <span data-node="marquee_5" data-node-type="text" data-node-label="Marquee 5" data-node-default="Landscape Photography" class="text-[#D4D4D4] text-[12px] md:text-[14px] font-sans tracking-[0.2em] uppercase">
          {{marquee_5}}
        </span>
        <img src="{{marquee_icon}}" class="w-6 h-6 md:w-7 md:h-7 opacity-70" alt="★">
        <span data-node="marquee_6" data-node-type="text" data-node-label="Marquee 6" data-node-default="Branding Photography" class="text-[#D4D4D4] text-[12px] md:text-[14px] font-sans tracking-[0.2em] uppercase">
          {{marquee_6}}
        </span>
        <img src="{{marquee_icon}}" class="w-6 h-6 md:w-7 md:h-7 opacity-70" alt="★">
      </div>
      <!-- Repeated for loop -->
      <div class="flex items-center gap-8 md:gap-12">
        <span class="text-[#D4D4D4] text-[12px] md:text-[14px] font-sans tracking-[0.2em] uppercase">
          {{marquee_1}}
        </span>
        <img src="{{marquee_icon}}" class="w-6 h-6 md:w-7 md:h-7 opacity-70" alt="★">
        <span class="text-[#D4D4D4] text-[12px] md:text-[14px] font-sans tracking-[0.2em] uppercase">
          {{marquee_2}}
        </span>
        <img src="{{marquee_icon}}" class="w-6 h-6 md:w-7 md:h-7 opacity-70" alt="★">
        <span class="text-[#D4D4D4] text-[12px] md:text-[14px] font-sans tracking-[0.2em] uppercase">
          {{marquee_3}}
        </span>
        <img src="{{marquee_icon}}" class="w-6 h-6 md:w-7 md:h-7 opacity-70" alt="★">
        <span class="text-[#D4D4D4] text-[12px] md:text-[14px] font-sans tracking-[0.2em] uppercase">
          {{marquee_4}}
        </span>
        <img src="{{marquee_icon}}" class="w-6 h-6 md:w-7 md:h-7 opacity-70" alt="★">
        <span class="text-[#D4D4D4] text-[12px] md:text-[14px] font-sans tracking-[0.2em] uppercase">
          {{marquee_5}}
        </span>
        <img src="{{marquee_icon}}" class="w-6 h-6 md:w-7 md:h-7 opacity-70" alt="★">
        <span class="text-[#D4D4D4] text-[12px] md:text-[14px] font-sans tracking-[0.2em] uppercase">
          {{marquee_6}}
        </span>
        <img src="{{marquee_icon}}" class="w-6 h-6 md:w-7 md:h-7 opacity-70" alt="★">
      </div>
      <div class="flex items-center gap-8 md:gap-12">
        <span class="text-[#D4D4D4] text-[12px] md:text-[14px] font-sans tracking-[0.2em] uppercase">
          {{marquee_1}}
        </span>
        <img src="{{marquee_icon}}" class="w-6 h-6 md:w-7 md:h-7 opacity-70" alt="★">
        <span class="text-[#D4D4D4] text-[12px] md:text-[14px] font-sans tracking-[0.2em] uppercase">
          {{marquee_2}}
        </span>
        <img src="{{marquee_icon}}" class="w-6 h-6 md:w-7 md:h-7 opacity-70" alt="★">
        <span class="text-[#D4D4D4] text-[12px] md:text-[14px] font-sans tracking-[0.2em] uppercase">
          {{marquee_3}}
        </span>
        <img src="{{marquee_icon}}" class="w-6 h-6 md:w-7 md:h-7 opacity-70" alt="★">
        <span class="text-[#D4D4D4] text-[12px] md:text-[14px] font-sans tracking-[0.2em] uppercase">
          {{marquee_4}}
        </span>
        <img src="{{marquee_icon}}" class="w-6 h-6 md:w-7 md:h-7 opacity-70" alt="★">
        <span class="text-[#D4D4D4] text-[12px] md:text-[14px] font-sans tracking-[0.2em] uppercase">
          {{marquee_5}}
        </span>
        <img src="{{marquee_icon}}" class="w-6 h-6 md:w-7 md:h-7 opacity-70" alt="★">
        <span class="text-[#D4D4D4] text-[12px] md:text-[14px] font-sans tracking-[0.2em] uppercase">
          {{marquee_6}}
        </span>
        <img src="{{marquee_icon}}" class="w-6 h-6 md:w-7 md:h-7 opacity-70" alt="★">
      </div>
      <div class="flex items-center gap-8 md:gap-12">
        <span class="text-[#D4D4D4] text-[12px] md:text-[14px] font-sans tracking-[0.2em] uppercase">
          {{marquee_1}}
        </span>
        <img src="{{marquee_icon}}" class="w-6 h-6 md:w-7 md:h-7 opacity-70" alt="★">
        <span class="text-[#D4D4D4] text-[12px] md:text-[14px] font-sans tracking-[0.2em] uppercase">
          {{marquee_2}}
        </span>
        <img src="{{marquee_icon}}" class="w-6 h-6 md:w-7 md:h-7 opacity-70" alt="★">
        <span class="text-[#D4D4D4] text-[12px] md:text-[14px] font-sans tracking-[0.2em] uppercase">
          {{marquee_3}}
        </span>
        <img src="{{marquee_icon}}" class="w-6 h-6 md:w-7 md:h-7 opacity-70" alt="★">
        <span class="text-[#D4D4D4] text-[12px] md:text-[14px] font-sans tracking-[0.2em] uppercase">
          {{marquee_4}}
        </span>
        <img src="{{marquee_icon}}" class="w-6 h-6 md:w-7 md:h-7 opacity-70" alt="★">
        <span class="text-[#D4D4D4] text-[12px] md:text-[14px] font-sans tracking-[0.2em] uppercase">
          {{marquee_5}}
        </span>
        <img src="{{marquee_icon}}" class="w-6 h-6 md:w-7 md:h-7 opacity-70" alt="★">
        <span class="text-[#D4D4D4] text-[12px] md:text-[14px] font-sans tracking-[0.2em] uppercase">
          {{marquee_6}}
        </span>
        <img src="{{marquee_icon}}" class="w-6 h-6 md:w-7 md:h-7 opacity-70" alt="★">
      </div>
    </div>
  </div>

  <!-- GALLERY GRID -->
  <div class="max-w-[1400px] mx-auto px-5">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <!-- COLUMN 1: Tall then Rect -->
      <div class="flex flex-col gap-6">
        <!-- IMAGE 1: Tall (Blue) -->
        <div class="relative overflow-hidden rounded-xl aspect-[2/3] group">
          <img data-node="gallery_image_1" data-node-type="file" data-node-label="Gallery Image 1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767440911/seltrix/templates/ss-photography/gallery-1.svg" src="{{gallery_image_1}}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" alt="Gallery 1">
        </div>
        <!-- IMAGE 4: Rect (Pink Scarf) -->
        <div class="relative overflow-hidden rounded-xl aspect-[4/3] group">
          <img data-node="gallery_image_4" data-node-type="file" data-node-label="Gallery Image 4" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767440927/seltrix/templates/ss-photography/gallery-4.svg" src="{{gallery_image_4}}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" alt="Gallery 4">
        </div>
      </div>

      <!-- COLUMN 2: Rect then Rect (Equal) -->
      <div class="flex flex-col gap-6">
        <!-- IMAGE 2: Rect (Red) -->
        <div class="relative overflow-hidden rounded-xl aspect-[4/3] group">
          <img data-node="gallery_image_2" data-node-type="file" data-node-label="Gallery Image 2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767440917/seltrix/templates/ss-photography/gallery-2.svg" src="{{gallery_image_2}}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" alt="Gallery 2">
        </div>
        <!-- IMAGE 5: Rect (Yellow) -->
        <div class="relative overflow-hidden rounded-xl aspect-[4/3] group">
          <img data-node="gallery_image_5" data-node-type="file" data-node-label="Gallery Image 5" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767440932/seltrix/templates/ss-photography/gallery-5.svg" src="{{gallery_image_5}}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" alt="Gallery 5">
        </div>
        <!-- IMAGE 7: Rect (Yellow) -->
        <div class="relative overflow-hidden rounded-xl aspect-[4/3] group">
          <img data-node="gallery_image_7" data-node-type="file" data-node-label="Gallery Image 7" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767440942/seltrix/templates/ss-photography/gallery-7.svg" src="{{gallery_image_7}}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" alt="Gallery 7">
        </div>
      </div>

      <!-- COLUMN 3: Rect then Tall -->
      <div class="flex flex-col gap-6">
        <!-- IMAGE 3: Rect (Sky) -->
        <div class="relative overflow-hidden rounded-xl aspect-[4/3] group">
          <img data-node="gallery_image_3" data-node-type="file" data-node-label="Gallery Image 3" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767440922/seltrix/templates/ss-photography/gallery-3.svg" src="{{gallery_image_3}}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" alt="Gallery 3">
        </div>
        <!-- IMAGE 6: Tall (BW) -->
        <div class="relative overflow-hidden rounded-xl aspect-[2/3] group">
          <img data-node="gallery_image_6" data-node-type="file" data-node-label="Gallery Image 6" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767440937/seltrix/templates/ss-photography/gallery-6.svg" src="{{gallery_image_6}}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" alt="Gallery 6">
        </div>
      </div>
    </div>
  </div>

  
</section>