<section data-component-type="SponsorsGrid" class="py-16 xl:py-16 bg-white" data-component-slug="marathon-sponsors-grid">
  <div class="mx-auto px-6 lg:px-16 xl:px-[95px]">
    <!-- Header -->
    <div class="text-center mb-12">
      <!-- Section Label -->
      <span data-node="sponsors_label" data-node-type="text" data-node-label="Section Label" data-node-default="OUR SPONSORS" class="text-sm tracking-[0.2em] text-black font-bold uppercase mb-4 block">{{sponsors_label}}</span>

      <!-- Title -->
      <h2 data-node="sponsors_title" data-node-type="text" data-node-label="Section Title" data-node-default="Partners Who Power Us" class="text-3xl md:text-4xl xl:text-5xl font-['Racing_Sans_One'] text-black mb-6">
        {{sponsors_title}}
      </h2>

      <!-- Accent Line -->
      <div class="w-16 h-1 bg-[#F97316] mx-auto"></div>
    </div>

    <!-- Sponsors Grid - 5 columns x 3 rows -->
    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
      <!-- Row 1 -->
      <div class="border border-black p-6 xl:p-8 flex items-center justify-center">
        <img data-node="sponsor_1" data-node-type="file" data-node-label="Sponsor 1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053073/seltrix/templates/marathon-template/sponsor-grid-1.svg" src="{{sponsor_1}}" alt="Sponsor" class="h-8 xl:h-16 object-contain grayscale hover:grayscale-0 transition-all">
      </div>
      <div class="border border-black p-6 xl:p-8 flex items-center justify-center">
        <img data-node="sponsor_2" data-node-type="file" data-node-label="Sponsor 2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053083/seltrix/templates/marathon-template/sponsor-grid-2.svg" src="{{sponsor_2}}" alt="Sponsor" class="h-8 xl:h-16 object-contain grayscale hover:grayscale-0 transition-all">
      </div>
      <div class="border border-black p-6 xl:p-8 flex items-center justify-center">
        <img data-node="sponsor_3" data-node-type="file" data-node-label="Sponsor 3" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053084/seltrix/templates/marathon-template/sponsor-grid-3.svg" src="{{sponsor_3}}" alt="Sponsor" class="h-8 xl:h-16 object-contain grayscale hover:grayscale-0 transition-all">
      </div>
      <div class="border border-black p-6 xl:p-8 flex items-center justify-center">
        <img data-node="sponsor_4" data-node-type="file" data-node-label="Sponsor 4" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053086/seltrix/templates/marathon-template/sponsor-grid-4.svg" src="{{sponsor_4}}" alt="Sponsor" class="h-8 xl:h-16 object-contain grayscale hover:grayscale-0 transition-all">
      </div>
      <div class="border border-black p-6 xl:p-8 flex items-center justify-center">
        <img data-node="sponsor_5" data-node-type="file" data-node-label="Sponsor 5" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053087/seltrix/templates/marathon-template/sponsor-grid-5.svg" src="{{sponsor_5}}" alt="Sponsor" class="h-8 xl:h-16 object-contain grayscale hover:grayscale-0 transition-all">
      </div>

      <!-- Row 2 -->
      <div class="border border-black p-6 xl:p-8 flex items-center justify-center">
        <img data-node="sponsor_6" data-node-type="file" data-node-label="Sponsor 6" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053089/seltrix/templates/marathon-template/sponsor-grid-6.svg" src="{{sponsor_6}}" alt="Sponsor" class="h-8 xl:h-16 object-contain grayscale hover:grayscale-0 transition-all">
      </div>
      <div class="border border-black p-6 xl:p-8 flex items-center justify-center">
        <img data-node="sponsor_7" data-node-type="file" data-node-label="Sponsor 7" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053091/seltrix/templates/marathon-template/sponsor-grid-7.svg" src="{{sponsor_7}}" alt="Sponsor" class="h-8 xl:h-16 object-contain grayscale hover:grayscale-0 transition-all">
      </div>
      <div class="border border-black p-6 xl:p-8 flex items-center justify-center">
        <img data-node="sponsor_8" data-node-type="file" data-node-label="Sponsor 8" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053093/seltrix/templates/marathon-template/sponsor-grid-8.svg" src="{{sponsor_8}}" alt="Sponsor" class="h-8 xl:h-16 object-contain grayscale hover:grayscale-0 transition-all">
      </div>
      <div class="border border-black p-6 xl:p-8 flex items-center justify-center">
        <img data-node="sponsor_9" data-node-type="file" data-node-label="Sponsor 9" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053095/seltrix/templates/marathon-template/sponsor-grid-9.svg" src="{{sponsor_9}}" alt="Sponsor" class="h-8 xl:h-16 object-contain grayscale hover:grayscale-0 transition-all">
      </div>
      <div class="border border-black p-6 xl:p-8 flex items-center justify-center">
        <img data-node="sponsor_10" data-node-type="file" data-node-label="Sponsor 10" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053074/seltrix/templates/marathon-template/sponsor-grid-10.svg" src="{{sponsor_10}}" alt="Sponsor" class="h-8 xl:h-16 object-contain grayscale hover:grayscale-0 transition-all">
      </div>

      <!-- Row 3 -->
      <div class="border border-black p-6 xl:p-8 flex items-center justify-center">
        <img data-node="sponsor_11" data-node-type="file" data-node-label="Sponsor 11" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053075/seltrix/templates/marathon-template/sponsor-grid-11.svg" src="{{sponsor_11}}" alt="Sponsor" class="h-8 xl:h-16 object-contain grayscale hover:grayscale-0 transition-all">
      </div>
      <div class="border border-black p-6 xl:p-8 flex items-center justify-center">
        <img data-node="sponsor_12" data-node-type="file" data-node-label="Sponsor 12" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053077/seltrix/templates/marathon-template/sponsor-grid-12.svg" src="{{sponsor_12}}" alt="Sponsor" class="h-8 xl:h-16 object-contain grayscale hover:grayscale-0 transition-all">
      </div>
      <div class="border border-black p-6 xl:p-8 flex items-center justify-center">
        <img data-node="sponsor_13" data-node-type="file" data-node-label="Sponsor 13" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053078/seltrix/templates/marathon-template/sponsor-grid-13.svg" src="{{sponsor_13}}" alt="Sponsor" class="h-8 xl:h-16 object-contain grayscale hover:grayscale-0 transition-all">
      </div>
      <div class="border border-black p-6 xl:p-8 flex items-center justify-center">
        <img data-node="sponsor_14" data-node-type="file" data-node-label="Sponsor 14" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053079/seltrix/templates/marathon-template/sponsor-grid-14.svg" src="{{sponsor_14}}" alt="Sponsor" class="h-8 xl:h-16 object-contain grayscale hover:grayscale-0 transition-all">
      </div>
      <div class="border border-black p-6 xl:p-8 flex items-center justify-center">
        <img data-node="sponsor_15" data-node-type="file" data-node-label="Sponsor 15" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053081/seltrix/templates/marathon-template/sponsor-grid-15.svg" src="{{sponsor_15}}" alt="Sponsor" class="h-8 xl:h-16 object-contain grayscale hover:grayscale-0 transition-all">
      </div>
    </div>
  </div>
</section>