<section class="bg-white w-full pt-10 pb-3 px-4" data-component-type="Content" data-component-slug="sports-template-contact">

  <div class="max-w-[90%] mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">

    <!-- CARD 1 -->
    <div class="flex items-start gap-4 border border-[#E7E7E7] px-6 py-8 bg-white/10 rounded">

      <!-- Icon -->
      <div class="bg-pink-200 rounded flex items-center justify-center w-10 h-10">
        <img data-node="contact_icon_1" data-node-type="file" data-node-label="Contact Icon 1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767337968/seltrix/templates/sports-template/address/headquarters.png" src="{{contact_icon_1}}" class="w-5 h-5 object-contain opacity-90" alt="Contact Icon 1">
      </div>

      <div class="flex flex-col gap-2">
        
        <!-- Title -->
        <p class="text-lg font-bold uppercase text-black tracking-tight" data-node="contact_title_1" data-node-type="text" data-node-label="Contact Title 1" data-node-default="Headquarters">
          {{contact_title_1}}
        </p>

        <div class="w-12 h-[2px] bg-[#940F0F] mt-1 mb-2"></div>

        <!-- Line 1 -->
        <p class="text-sm leading-tight text-[#999999]" data-node="contact_line1_1" data-node-type="text" data-node-label="Contact Address Line 1" data-node-default="236 Dotland Street, STKD NY">
          {{contact_line1_1}}
        </p>

        <!-- Line 2 -->
        <p class="text-sm leading-tight text-[#999999] mt-1" data-node="contact_line2_1" data-node-type="text" data-node-label="Contact Address Line 2" data-node-default="Frankfurt Germany">
          {{contact_line2_1}}
        </p>

      </div>
    </div>

    <!-- CARD 2 -->
    <div class="flex items-start gap-4 border border-[#E7E7E7] px-6 py-8 bg-white/10 rounded">

      <div class="bg-pink-200 rounded flex items-center justify-center w-10 h-10">
        <img data-node="contact_icon_2" data-node-type="file" data-node-label="Contact Icon 2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767337968/seltrix/templates/sports-template/address/headquarters.png" src="{{contact_icon_2}}" class="w-5 h-5 object-contain opacity-90" alt="Contact Icon 2">
      </div>

      <div class="flex flex-col gap-2">

        <p class="text-lg font-bold uppercase text-black tracking-tight" data-node="contact_title_2" data-node-type="text" data-node-label="Contact Title 2" data-node-default="MAIL US 24/7">
          {{contact_title_2}}
        </p>

        <div class="w-12 h-[2px] bg-[#940F0F] mt-1 mb-2"></div>

        <p class="text-sm leading-tight text-[#999999] mt-3" data-node="contact_line1_2" data-node-type="text" data-node-label="Email Line" data-node-default="Info@webmail.com">
          {{contact_line1_2}}
        </p>

      </div>
    </div>

    <!-- CARD 3 -->
    <div class="flex items-start gap-4 border border-[#E7E7E7] px-6 py-8 bg-white/10 rounded">

      <div class="bg-pink-200 rounded flex items-center justify-center w-10 h-10">
        <img data-node="contact_icon_3" data-node-type="file" data-node-label="Contact Icon 3" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767337968/seltrix/templates/sports-template/address/headquarters.png" src="{{contact_icon_3}}" class="w-5 h-5 object-contain opacity-90" alt="Contact Icon 3">
      </div>

      <div class="flex flex-col gap-2">

        <p class="text-lg font-bold uppercase text-black tracking-tight" data-node="contact_title_3" data-node-type="text" data-node-label="Contact Title 3" data-node-default="SPONSORS ONLY">
          {{contact_title_3}}
        </p>

        <div class="w-12 h-[2px] bg-[#940F0F] mt-1 mb-2"></div>

        <p class="text-sm leading-tight mt-3 text-[#999999]" data-node="contact_line1_3" data-node-type="text" data-node-label="Sponsors Email" data-node-default="Info@webmail.com">
          {{contact_line1_3}}
        </p>

      </div>
    </div>

  </div>
</section>