<section class="w-full px-4 md:px-12 lg:px-24 pt-20 md:pt-32 lg:pt-40 pb-5" data-component-type="Content">
  <!-- PROJECT 1 — WEBSITE DESIGNING -->

  <img
    src="{{work_project_feature_image}}"
    class="w-full object-cover mb-10 rounded-none"
    alt="Website Designing Project"
    data-node="work_project_feature_image"
    data-node-type="file"
    data-node-default="./assets/website designing work.webp"
  />

  <div
    class="flex flex-col md:flex-row justify-between items-start md:items-center gap-8 md:gap-10 mb-16 md:mb-20 lg:mb-24"
  >
    <div>
      <h2
        class="font-['Cabin'] text-[28px] md:text-[32px] font-normal text-white mb-3"
        data-node="work_project_feature_title_1"
        data-node-label="Work Project Feature Title 1"
        data-node-type="text"
        data-node-default="Website Designing"
      >
        {{work_project_feature_title_1}}
      </h2>

      <p
        class="font-['Cabin'] text-[20px] md:text-[24px] font-normal text-[#7E7E7E] leading-[130%] max-w-[900px]"
        data-node="work_project_feature_desc_1"
        data-node-label="Work Project Feature Desc 1"
        data-node-type="textarea"
        data-node-default="A conversion-focused website designed to reduce bounce rate, improve navigation clarity, and guide users toward action within seconds of landing."
      >
        {{work_project_feature_desc_1}}
      </p>
    </div>

    <a
      class="w-full md:w-[210px] max-w-[340px] h-14 py-2.5 px-4 rounded-xl bg-[#D3FF5B] text-black font-['Cabin'] text-[24px] font-normal flex justify-center items-center cursor-pointer transition-opacity duration-300 hover:opacity-85 whitespace-nowrap shrink-0"
      data-node="work_project_feature_cta_link_1"
      data-node-type="page_links"
      data-node-default="{{work_project_feature_cta_link_1}}"
    >
      <span data-node="work_project_feature_cta_text_1" data-node-type="text" data-node-default="Explore project">
        {{work_project_feature_cta_text_1}}
      </span>
    </a>
  </div>

  <!-- PROJECT 2 — BRANDING -->

  <img
    src="{{work_project_feature_image_2}}"
    class="w-full object-cover mb-10 rounded-none"
    alt="Branding Project"
    data-node="work_project_feature_image_2"
    data-node-type="file"
    data-node-default="./assets/Branding.webp"
  />

  <div
    class="flex flex-col md:flex-row justify-between items-start md:items-center gap-8 md:gap-10 mb-16 md:mb-20 lg:mb-24"
  >
    <div>
      <h2
        class="font-['Cabin'] text-[28px] md:text-[32px] font-normal text-white mb-3"
        data-node="work_project_feature_title_2"
        data-node-label="Work Project Feature Title 2"
        data-node-type="text"
        data-node-default="Branding"
      >
        {{work_project_feature_title_2}}
      </h2>
      <p
        class="font-['Cabin'] text-[20px] md:text-[24px] font-normal text-[#7E7E7E] leading-[130%] max-w-[900px]"
        data-node="work_project_feature_desc_2"
        data-node-label="Work Project Feature Desc 2"
        data-node-type="textarea"
        data-node-default="A complete brand system crafted to establish authority, consistency, and recognition across digital and offline touchpoints."
      >
        {{work_project_feature_desc_2}}
      </p>
    </div>

    <a
      class="w-full md:w-[210px] max-w-[340px] h-14 py-2.5 px-4 rounded-xl bg-[#D3FF5B] text-black font-['Cabin'] text-[24px] font-normal flex justify-center items-center cursor-pointer transition-opacity duration-300 hover:opacity-85 whitespace-nowrap shrink-0"
      data-node="work_project_feature_cta_link_2"
      data-node-type="page_links"
      data-node-default="{{work_project_feature_cta_link_2}}"
    >
      <span data-node="work_project_feature_cta_text_2" data-node-type="text" data-node-default="Explore project">
        {{work_project_feature_cta_text_2}}
      </span>
    </a>
  </div>

  <!-- PROJECT 3 — GRAPHIC DESIGNING -->

  <img
    src="{{work_project_feature_image_3}}"
    class="w-full object-cover mb-10 rounded-none"
    alt="Graphic Designing Project"
    data-node="work_project_feature_image_3"
    data-node-type="file"
    data-node-default="./assets/Graphic Designing.webp"
  />

  <div
    class="flex flex-col md:flex-row justify-between items-start md:items-center gap-8 md:gap-10 mb-16 md:mb-20 lg:mb-24"
  >
    <div>
      <h2
        class="font-['Cabin'] text-[28px] md:text-[32px] font-normal text-white mb-3"
        data-node="work_project_feature_title_3"
        data-node-label="Work Project Feature Title 3"
        data-node-type="text"
        data-node-default="Graphic Designing"
      >
        {{work_project_feature_title_3}}
      </h2>
      <p
        class="font-['Cabin'] text-[20px] md:text-[24px] font-normal text-[#7E7E7E] leading-[130%] max-w-[900px]"
        data-node="work_project_feature_desc_3"
        data-node-label="Work Project Feature Desc 3"
        data-node-type="textarea"
        data-node-default="High-impact visuals designed for performance, not decoration. Optimized for social engagement, ad recall, and brand consistency."
      >
        {{work_project_feature_desc_3}}
      </p>
    </div>

    <a
      class="w-full md:w-[210px] max-w-[340px] h-14 py-2.5 px-4 rounded-xl bg-[#D3FF5B] text-black font-['Cabin'] text-[24px] font-normal flex justify-center items-center cursor-pointer transition-opacity duration-300 hover:opacity-85 whitespace-nowrap shrink-0"
      data-node="work_project_feature_cta_link_3"
      data-node-type="page_links"
      data-node-default="{{work_project_feature_cta_link_3}}"
    >
      <span data-node="work_project_feature_cta_text_3" data-node-type="text" data-node-default="Explore project">
        {{work_project_feature_cta_text_3}}
      </span>
    </a>
  </div>

  <!-- PROJECT 4 — UX DESIGNING -->

  <img
    src="{{work_project_feature_image_4}}"
    class="w-full object-cover mb-10 rounded-none"
    alt="UX Designing Project"
    data-node="work_project_feature_image_4"
    data-node-type="file"
    data-node-default="./assets/UX Designing.webp"
  />

  <div
    class="flex flex-col md:flex-row justify-between items-start md:items-center gap-8 md:gap-10 mb-16 md:mb-20 lg:mb-24"
  >
    <div>
      <h2
        class="font-['Cabin'] text-[28px] md:text-[32px] font-normal text-white mb-3"
        data-node="work_project_feature_title_4"
        data-node-label="Work Project Feature Title 4"
        data-node-type="text"
        data-node-default="UX Designing"
      >
        {{work_project_feature_title_4}}
      </h2>
      <p
        class="font-['Cabin'] text-[20px] md:text-[24px] font-normal text-[#7E7E7E] leading-[130%] max-w-[900px]"
        data-node="work_project_feature_desc_4"
        data-node-label="Work Project Feature Desc 4"
        data-node-type="textarea"
        data-node-default="User journeys redesigned to remove friction, simplify decision-making, and increase task completion through intuitive UX architecture."
      >
        {{work_project_feature_desc_4}}
      </p>
    </div>

    <a
      class="w-full md:w-[210px] max-w-[340px] h-14 py-2.5 px-4 rounded-xl bg-[#D3FF5B] text-black font-['Cabin'] text-[24px] font-normal flex justify-center items-center cursor-pointer transition-opacity duration-300 hover:opacity-85 whitespace-nowrap shrink-0"
      data-node="work_project_feature_cta_link_4"
      data-node-type="page_links"
      data-node-default="{{work_project_feature_cta_link_4}}"
    >
      <span data-node="work_project_feature_cta_text_4" data-node-type="text" data-node-default="Explore project">
        {{work_project_feature_cta_text_4}}
      </span>
    </a>
  </div>
</section>
