<section class="bg-[#FDFDF9] font-['Cormorant',_serif] py-20 px-5" data-component-type="Content" data-component-slug="ss-photography-awards">
  <div class="max-w-[1400px] mx-auto">
    <!-- TABLE HEADER (Desktop Only) -->
    <div class="hidden md:grid grid-cols-12 gap-6 pb-6 border-b border-[#D4D4D4] mb-8">
      <div class="col-span-1 text-[#666666] text-xs font-sans tracking-widest uppercase">
        <span data-node="header_1" data-node-type="text" data-node-label="Header 1" data-node-default="Year">{{header_1}}</span>
      </div>
      <div class="col-span-4 text-[#666666] text-xs font-sans tracking-widest uppercase">
        <span data-node="header_2" data-node-type="text" data-node-label="Header 2" data-node-default="Awards & Recognitions">{{header_2}}</span>
      </div>
      <div class="col-span-3 text-[#666666] text-xs font-sans tracking-widest uppercase">
        <span data-node="header_3" data-node-type="text" data-node-label="Header 3" data-node-default="Project">{{header_3}}</span>
      </div>
      <div class="col-span-4 text-[#666666] text-xs font-sans tracking-widest uppercase">
        <span data-node="header_4" data-node-type="text" data-node-label="Header 4" data-node-default="Description">{{header_4}}</span>
      </div>
    </div>

    <!-- ROW 1 -->
    <div class="flex flex-col md:grid md:grid-cols-12 gap-4 md:gap-6 py-8 border-b border-[#E5E5E5]">
      <!-- Year -->
      <div class="col-span-1 text-lg mb-2 md:mb-0">
        <span data-node="year_1" data-node-type="text" data-node-label="Year 1" data-node-default="2022">{{year_1}}</span>
      </div>
      <!-- Title -->
      <div class="col-span-4 text-xl md:text-2xl font-medium text-[#1A1A1A] mb-2 md:mb-0">
        <span data-node="title_1" data-node-type="text" data-node-label="Title 1" data-node-default="Photographer of the Year Award">{{title_1}}</span>
      </div>
      <!-- Project -->
      <div class="col-span-3 text-lg text-[#666666] mb-2 md:mb-0">
        <span data-node="project_1" data-node-type="text" data-node-label="Project 1" data-node-default="Expressions Unveiled">{{project_1}}</span>
      </div>
      <!-- Description -->
      <div class="col-span-4 text-base text-[#666666] leading-relaxed">
        <span data-node="description_1" data-node-type="text" data-node-label="Description 1" data-node-default="Recognized for outstanding work in capturing diverse and emotive portraits that tell unique stories.">{{description_1}}</span>
      </div>
    </div>

    <!-- ROW 2 -->
    <div class="flex flex-col md:grid md:grid-cols-12 gap-4 md:gap-6 py-8 border-b border-[#E5E5E5]">
      <div class="col-span-1 text-lg mb-2 md:mb-0">
        <span data-node="year_2" data-node-type="text" data-node-label="Year 2" data-node-default="2020">{{year_2}}</span>
      </div>
      <div class="col-span-4 text-xl md:text-2xl font-medium text-[#1A1A1A] mb-2 md:mb-0">
        <span data-node="title_2" data-node-type="text" data-node-label="Title 2" data-node-default="Best Wedding Photography Series">{{title_2}}</span>
      </div>
      <div class="col-span-3 text-lg text-[#666666] mb-2 md:mb-0">
        <span data-node="project_2" data-node-type="text" data-node-label="Project 2" data-node-default="Joy in Every Frame">{{project_2}}</span>
      </div>
      <div class="col-span-4 text-base text-[#666666] leading-relaxed">
        <span data-node="description_2" data-node-type="text" data-node-label="Description 2" data-node-default="Awarded for excellence in documenting the essence and joy of wedding celebrations through a compelling series of images.">{{description_2}}</span>
      </div>
    </div>

    <!-- ROW 3 -->
    <div class="flex flex-col md:grid md:grid-cols-12 gap-4 md:gap-6 py-8 border-b border-[#E5E5E5]">
      <div class="col-span-1 text-lg mb-2 md:mb-0">
        <span data-node="year_3" data-node-type="text" data-node-label="Year 3" data-node-default="2019">{{year_3}}</span>
      </div>
      <div class="col-span-4 text-xl md:text-2xl font-medium text-[#1A1A1A] mb-2 md:mb-0">
        <span data-node="title_3" data-node-type="text" data-node-label="Title 3" data-node-default="Nature Photographer of the Year">{{title_3}}</span>
      </div>
      <div class="col-span-3 text-lg text-[#666666] mb-2 md:mb-0">
        <span data-node="project_3" data-node-type="text" data-node-label="Project 3" data-node-default="Wild Wonders">{{project_3}}</span>
      </div>
      <div class="col-span-4 text-base text-[#666666] leading-relaxed">
        <span data-node="description_3" data-node-type="text" data-node-label="Description 3" data-node-default="Acknowledged for exceptional skills in showcasing the beauty of wildlife and natural landscapes through captivating photographs.">{{description_3}}</span>
      </div>
    </div>

    <!-- ROW 4 -->
    <div class="flex flex-col md:grid md:grid-cols-12 gap-4 md:gap-6 py-8 border-b border-[#D4D4D4]">
      <div class="col-span-1 text-lg mb-2 md:mb-0">
        <span data-node="year_4" data-node-type="text" data-node-label="Year 4" data-node-default="2018">{{year_4}}</span>
      </div>
      <div class="col-span-4 text-xl md:text-2xl font-medium text-[#1A1A1A] mb-2 md:mb-0">
        <span data-node="title_4" data-node-type="text" data-node-label="Title 4" data-node-default="Fine Art Photography Showcase">{{title_4}}</span>
      </div>
      <div class="col-span-3 text-lg text-[#666666] mb-2 md:mb-0">
        <span data-node="project_4" data-node-type="text" data-node-label="Project 4" data-node-default="Ethereal Impressions">{{project_4}}</span>
      </div>
      <div class="col-span-4 text-base text-[#666666] leading-relaxed">
        <span data-node="description_4" data-node-type="text" data-node-label="Description 4" data-node-default="Received recognition for the artistic and imaginative approach to fine art photography, creating visually stunning and thought-provoking images.">{{description_4}}</span>
      </div>
    </div>
  </div>
</section>