<section class="bg-white py-12" data-component-type="Content" data-component-slug="sports-template-club-member">
  <div class="max-w-[90%] mx-auto px-4">
    <div class="grid grid-cols-2 md:grid-cols-4 gap-12">
      <!-- CARD 1 -->
      <div class="relative flex flex-col items-center lg:block text-center lg:text-left">
        <!-- Desktop only -->
        <p class="hidden lg:block text-[#0C0A0A] text-md font-bold uppercase absolute top-5 left-[5.7em] ml-3" data-node="stats1_title" data-node-type="text" data-node-label="Stats 1 Title" data-node-default="CLUB MEMBER">
          {{stats1_title}}
        </p>

        <div class="border border-[#666666] rounded-full w-24 h-24 md:w-32 md:h-32 flex items-center justify-center">
          <p class="text-[#666666] text-2xl md:text-6xl font-bold" data-node="stats1_value" data-node-type="text" data-node-label="Stats 1 Value" data-node-default="69">
            {{stats1_value}}
          </p>
        </div>

        <!-- Mobile + Tablet -->
        <p class="lg:hidden text-[#0C0A0A] text-sm font-bold uppercase mt-3" data-node="stats1_title" data-node-type="text" data-node-label="Stats 1 Title" data-node-default="CLUB MEMBER">
          {{stats1_title}}
        </p>
      </div>

      <!-- CARD 2 -->
      <div class="relative flex flex-col items-center lg:block text-center lg:text-left">
        <p class="hidden lg:block text-[#0C0A0A] text-md font-bold uppercase absolute top-5 left-[5.7em] ml-3" data-node="stats2_title" data-node-type="text" data-node-label="Stats 2 Title" data-node-default="CLUB MEMBER">
          {{stats2_title}}
        </p>

        <div class="border border-[#666666] rounded-full w-24 h-24 md:w-32 md:h-32 flex items-center justify-center">
          <p class="text-[#666666] text-2xl md:text-6xl font-bold" data-node="stats2_value" data-node-type="text" data-node-label="Stats 2 Value" data-node-default="12">
            {{stats2_value}}
          </p>
        </div>

        <p class="lg:hidden text-[#0C0A0A] text-sm font-bold uppercase mt-3" data-node="stats2_title" data-node-type="text" data-node-label="Stats 2 Title" data-node-default="CLUB MEMBER">
          {{stats2_title}}
        </p>
      </div>

      <!-- CARD 3 -->
      <div class="relative flex flex-col items-center lg:block text-center lg:text-left">
        <p class="hidden lg:block text-[#0C0A0A] text-md font-bold uppercase absolute top-5 left-[5.7em] ml-3" data-node="stats3_title" data-node-type="text" data-node-label="Stats 3 Title" data-node-default="MATCHES WON">
          {{stats3_title}}
        </p>

        <div class="border border-[#666666] rounded-full w-24 h-24 md:w-32 md:h-32 flex items-center justify-center">
          <p class="text-[#666666] text-2xl md:text-6xl font-bold" data-node="stats3_value" data-node-type="text" data-node-label="Stats 3 Value" data-node-default="48">
            {{stats3_value}}
          </p>
        </div>

        <p class="lg:hidden text-[#0C0A0A] text-sm font-bold uppercase mt-3" data-node="stats3_title" data-node-type="text" data-node-label="Stats 3 Title" data-node-default="MATCHES WON">
          {{stats3_title}}
        </p>
      </div>

      <!-- CARD 4 -->
      <div class="relative flex flex-col items-center lg:block text-center lg:text-left">
        <p class="hidden lg:block text-[#0C0A0A] text-md font-bold uppercase absolute top-5 left-[5.7em] ml-3" data-node="stats4_title" data-node-type="text" data-node-label="Stats 4 Title" data-node-default="COACHES">
          {{stats4_title}}
        </p>

        <div class="border border-[#666666] rounded-full w-24 h-24 md:w-32 md:h-32 flex items-center justify-center">
          <p class="text-[#666666] text-2xl md:text-6xl font-bold" data-node="stats4_value" data-node-type="text" data-node-label="Stats 4 Value" data-node-default="09">
            {{stats4_value}}
          </p>
        </div>

        <p class="lg:hidden text-[#0C0A0A] text-sm font-bold uppercase mt-3" data-node="stats4_title" data-node-type="text" data-node-label="Stats 4 Title" data-node-default="COACHES">
          {{stats4_title}}
        </p>
      </div>
    </div>
  </div>
</section>