<section data-component-type="Content" class="bg-white py-8 md:py-20 md:pl-10" data-component-slug="sports-template-about-club">
  <div class="max-w-[90%] mx-auto px-4 grid lg:grid-cols-2 gap-10 items-center">
    <!-- LEFT IMAGES -->
    <div class="flex flex-col sm:flex-row gap-6 justify-center md:justify-center lg:justify-start">
      <!-- IMAGE 1 -->
      <img data-node="about_club_image1" data-node-type="file" data-node-label="about club image1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767337964/seltrix/templates/sports-template/aboutTheClub/image1.png" src="{{about_club_image1}}" class="w-full sm:w-[180px] md:w-[200px] h-[300px] sm:h-[350px] md:h-[300px] object-cover">

      <!-- IMAGE 2 -->
      <img data-node="about_club_image2" data-node-type="file" data-node-label="about club image2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767337965/seltrix/templates/sports-template/aboutTheClub/image2.png" src="{{about_club_image2}}" class="w-full sm:w-[200px] md:w-[250px] h-[300px] sm:h-[380px] md:h-[350px] object-cover">
    </div>

    <!-- RIGHT CONTENT -->
    <div class="ml-0 md:ml-5 lg:ml-10">
      <!-- FIXED -->

      <p data-node="about_club1_title" data-node-type="text" data-node-label="about club 1 title" data-node-default="ABOUT THE" class="text-3xl md:text-4xl font-semibold tracking-wide uppercase">
        {{about_club1_title}}
      </p>

      <h2 data-node="about_club2_value" data-node-type="text" data-node-label="about club 2 value" data-node-default="CLUB" class="text-4xl md:text-5xl font-bold uppercase leading-tight mb-6">
        {{about_club2_value}}
      </h2>

      <p data-node="about_club_des" data-node-type="textarea" data-node-label="Description" data-node-default="Lorem ipsum dolor sit amet consectetur. Vulputate elit mattis posuere
        neque faucibus feugiat malesuada. Suspendisse vestibulum malesuada
        libero tempus diam convallis eget feugiat. Cras quis sapien sit amet est
        semper pharetra convallis neque facilisis." class="text-[#666666] leading-relaxed tracking-[1px] text-sm md:text-base mb-8">
        {{about_club_des}}
      </p>

      <div class="grid grid-cols-2 md:grid-cols-3 gap-6 md:gap-8">
        <div class="flex items-start gap-3">
          <img data-node="about_club_tickimage" data-node-type="file" data-node-label="about club tickimage" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767337966/seltrix/templates/sports-template/aboutTheClub/tick.png" src="{{about_club_tickimage}}" class="w-4 h-4 mt-1 opacity-80">
          <div>
            <p data-node="about_club_subtitle1" data-node-type="text" data-node-label="about club subtitle1" data-node-default="Manager" class="text-[10px] uppercase text-[#111111] font-bold">
              {{about_club_subtitle1}}
            </p>
            <p data-node="about_club_subdes1" data-node-type="text" data-node-label="about club subdes1" data-node-default="PRO 05" class="text-[20px] font-extrabold text-[#111111]">
              {{about_club_subdes1}}
            </p>
          </div>
        </div>

        <div class="flex items-start gap-3">
          <img data-node="about_club_tickimage2" data-node-type="file" data-node-label="about club  tickimage2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767337966/seltrix/templates/sports-template/aboutTheClub/tick.png" src="{{about_club_tickimage2}}" class="w-4 h-4 mt-1 opacity-80">
          <div>
            <p data-node="about_club_subtitle2" data-node-type="text" data-node-label="about club subtitle2" data-node-default="Players" class="text-[10px] uppercase text-[#111111] font-bold">
              {{about_club_subtitle2}}
            </p>
            <p data-node="about_club_subdes2" data-node-type="text" data-node-label="about club subdes2" data-node-default="PRO 107" class="text-[20px] font-extrabold text-[#111111]">
              {{about_club_subdes2}}
            </p>
          </div>
        </div>

        <div class="flex items-start gap-3">
          <img data-node="about_club_tickimage3" data-node-type="file" data-node-label="about club  tickimage3" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767337966/seltrix/templates/sports-template/aboutTheClub/tick.png" src="{{about_club_tickimage3}}" class="w-4 h-4 mt-1 opacity-80">
          <div>
            <p data-node="about_club_subtitle3" data-node-type="text" data-node-label="about club subtitle3" data-node-default="Coach" class="text-[10px] uppercase text-[#111111] font-bold">
              {{about_club_subtitle3}}
            </p>
            <p data-node="about_club_subdes3" data-node-type="text" data-node-label="about club subdes3" data-node-default="PRO 19" class="text-[20px] font-extrabold text-[#111111]">
              {{about_club_subdes3}}
            </p>
          </div>
        </div>
      </div>

      <a data-node="about_club_cta_link" data-node-type="page_links" data-node-label="CTA Link" data-node-default="#" href="{{about_club_cta_link}}">
        <button class="bg-[#940F0F] text-white px-6 py-3 font-semibold mt-8 hover:bg-red-800 uppercase">
          <span data-node="about_club_cta_text" data-node-type="text" data-node-label="CTA Button Text" data-node-default="Our Team →">
            {{about_club_cta_text}}</span>
        </button>
      </a>
    </div>
  </div>
</section>