<section class="bg-[#FDFDF9] py-12 md:py-20 px-5 overflow-hidden" data-component-type="Content" data-component-slug="ss-photography-featured-carousel">
  <div class="max-w-[1400px] mx-auto">
    <!-- Carousel Container -->
    <div id="featuredCarousel" class="flex overflow-x-auto snap-x snap-mandatory scrollbar-hide gap-5 md:gap-10 pb-8" style="scrollbar-width: none; -ms-overflow-style: none">
      <!-- Slide 1 -->
      <div class="min-w-full snap-center flex flex-col group relative">
        <!-- Image -->
        <div class="relative w-full aspect-[4/3] md:aspect-[16/9] overflow-hidden rounded-sm bg-[#E5E5E5] mb-6">
          {{#if slide_image_1}}
          <img src="{{slide_image_1}}" class="w-full h-full object-cover transition-transform duration-[2000ms] ease-out group-hover:scale-105" alt="Featured 1" data-node="slide_image_1" data-node-type="file" data-node-label="Slide 1 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767440966/seltrix/templates/ss-photography/slide_image_1.svg">
          {{/if}}

          <!-- Gradient Overlay -->
          <div class="absolute inset-0 bg-gradient-to-t from-[rgba(0,0,0,0.2)] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
        </div>

        <!-- Info -->
        <div class="flex flex-col md:flex-row justify-between items-start md:items-end gap-6 border-b border-[#D4D4D4] pb-6">
          <div class="max-w-2xl">
            {{#if slide_title_1}}
            <h3 class="font-['Cormorant',_serif] text-3xl md:text-5xl text-[#1A1A1A] mb-2 leading-tight">
              <span data-node="slide_title_1" data-node-type="text" data-node-label="Slide 1 Title" data-node-default="Stillness in Shadow">{{slide_title_1}}</span>
            </h3>
            {{/if}} {{#if slide_desc_1}}
            <p class="font-sans text-sm md:text-base text-[#666666] leading-relaxed max-w-lg">
              <span data-node="slide_desc_1" data-node-type="text" data-node-label="Slide 1 Description" data-node-default="A quiet moment wrapped in darkness and restraint. Light falls softly, letting silence speak louder than motion.">{{slide_desc_1}}</span>
            </p>
            {{/if}}
          </div>

          <div class="flex flex-row md:flex-col items-center md:items-end gap-3 md:gap-1 w-full md:w-auto justify-between md:justify-end">
            {{#if slide_date_1}}
            <span class="font-sans text-sm md:text-lg text-[#1A1A1A] uppercase tracking-wide">
              <span data-node="slide_date_1" data-node-type="text" data-node-label="Slide 1 Date" data-node-default="2025 May">{{slide_date_1}}</span>
            </span>
            {{/if}} {{#if slide_link_1}}
            <a href="{{slide_link_1}}" class="inline-flex items-center gap-2 font-sans text-xs md:text-sm uppercase tracking-widest text-[#1A1A1A] hover:opacity-70 transition-opacity mt-2" data-node="slide_link_1" data-node-type="url" data-node-label="Slide 1 Link" data-node-default="#">
              <span data-node="slide_link_text_1" data-node-type="text" data-node-label="Slide 1 Link Text" data-node-default="View Project">{{slide_link_text_1}}</span>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                <path d="M5 12h14M12 5l7 7-7 7"/>
              </svg>
            </a>
            {{/if}}
          </div>
        </div>
      </div>

      <!-- Slide 2 -->
      <div class="min-w-full snap-center flex flex-col group relative">
        <!-- Image -->
        <div class="relative w-full aspect-[4/3] md:aspect-[16/9] overflow-hidden rounded-sm bg-[#E5E5E5] mb-6">
          {{#if slide_image_2}}
          <img src="{{slide_image_2}}" class="w-full h-full object-cover transition-transform duration-[2000ms] ease-out group-hover:scale-105" alt="Featured 2" data-node="slide_image_2" data-node-type="file" data-node-label="Slide 2 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767440969/seltrix/templates/ss-photography/slide_image_2.svg">
          {{/if}}
          <div class="absolute inset-0 bg-gradient-to-t from-[rgba(0,0,0,0.2)] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
        </div>

        <!-- Info -->
        <div class="flex flex-col md:flex-row justify-between items-start md:items-end gap-6 border-b border-[#D4D4D4] pb-6">
          <div class="max-w-2xl">
            {{#if slide_title_2}}
            <h3 class="font-['Cormorant',_serif] text-3xl md:text-5xl text-[#1A1A1A] mb-2 leading-tight">
              <span data-node="slide_title_2" data-node-type="text" data-node-label="Slide 2 Title" data-node-default="Echoes of Silence">{{slide_title_2}}</span>
            </h3>
            {{/if}} {{#if slide_desc_2}}
            <p class="font-sans text-sm md:text-base text-[#666666] leading-relaxed max-w-lg">
              <span data-node="slide_desc_2" data-node-type="text" data-node-label="Slide 2 Description" data-node-default="An exploration of empty spaces and the stories they tell. Architecture meets emotion in this visual essay.">{{slide_desc_2}}</span>
            </p>
            {{/if}}
          </div>

          <div class="flex flex-row md:flex-col items-center md:items-end gap-3 md:gap-1 w-full md:w-auto justify-between md:justify-end">
            {{#if slide_date_2}}
            <span class="font-sans text-sm md:text-lg text-[#1A1A1A] uppercase tracking-wide">
              <span data-node="slide_date_2" data-node-type="text" data-node-label="Slide 2 Date" data-node-default="2024 Dec">{{slide_date_2}}</span>
            </span>
            {{/if}} {{#if slide_link_2}}
            <a href="{{slide_link_2}}" class="inline-flex items-center gap-2 font-sans text-xs md:text-sm uppercase tracking-widest text-[#1A1A1A] hover:opacity-70 transition-opacity mt-2" data-node="slide_link_2" data-node-type="url" data-node-label="Slide 2 Link" data-node-default="#">
              <span data-node="slide_link_text_2" data-node-type="text" data-node-label="Slide 2 Link Text" data-node-default="View Project">{{slide_link_text_2}}</span>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                <path d="M5 12h14M12 5l7 7-7 7"/>
              </svg>
            </a>
            {{/if}}
          </div>
        </div>
      </div>

      <!-- Slide 3 -->
      <div class="min-w-full snap-center flex flex-col group relative">
        <!-- Image -->
        <div class="relative w-full aspect-[4/3] md:aspect-[16/9] overflow-hidden rounded-sm bg-[#E5E5E5] mb-6">
          {{#if slide_image_3}}
          <img src="{{slide_image_3}}" class="w-full h-full object-cover transition-transform duration-[2000ms] ease-out group-hover:scale-105" alt="Featured 3" data-node="slide_image_3" data-node-type="file" data-node-label="Slide 3 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767440971/seltrix/templates/ss-photography/slide_image_3.svg">
          {{/if}}
          <div class="absolute inset-0 bg-gradient-to-t from-[rgba(0,0,0,0.2)] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
        </div>

        <!-- Info -->
        <div class="flex flex-col md:flex-row justify-between items-start md:items-end gap-6 border-b border-[#D4D4D4] pb-6">
          <div class="max-w-2xl">
            {{#if slide_title_3}}
            <h3 class="font-['Cormorant',_serif] text-3xl md:text-5xl text-[#1A1A1A] mb-2 leading-tight">
              <span data-node="slide_title_3" data-node-type="text" data-node-label="Slide 3 Title" data-node-default="Urban Rhythm">{{slide_title_3}}</span>
            </h3>
            {{/if}} {{#if slide_desc_3}}
            <p class="font-sans text-sm md:text-base text-[#666666] leading-relaxed max-w-lg">
              <span data-node="slide_desc_3" data-node-type="text" data-node-label="Slide 3 Description" data-node-default="Capturing the pulse of the city through candid moments and geometric lines.">{{slide_desc_3}}</span>
            </p>
            {{/if}}
          </div>

          <div class="flex flex-row md:flex-col items-center md:items-end gap-3 md:gap-1 w-full md:w-auto justify-between md:justify-end">
            {{#if slide_date_3}}
            <span class="font-sans text-sm md:text-lg text-[#1A1A1A] uppercase tracking-wide">
              <span data-node="slide_date_3" data-node-type="text" data-node-label="Slide 3 Date" data-node-default="2024 Oct">{{slide_date_3}}</span>
            </span>
            {{/if}} {{#if slide_link_3}}
            <a href="{{slide_link_3}}" class="inline-flex items-center gap-2 font-sans text-xs md:text-sm uppercase tracking-widest text-[#1A1A1A] hover:opacity-70 transition-opacity mt-2" data-node="slide_link_3" data-node-type="url" data-node-label="Slide 3 Link" data-node-default="#">
              <span data-node="slide_link_text_3" data-node-type="text" data-node-label="Slide 3 Link Text" data-node-default="View Project">{{slide_link_text_3}}</span>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                <path d="M5 12h14M12 5l7 7-7 7"/>
              </svg>
            </a>
            {{/if}}
          </div>
        </div>
      </div>
    </div>
  </div>

  
</section>