<section data-component-type="Content" class="py-16 md:py-24" data-component-slug="ss-sports-running-partners">
  <div class="container mx-auto px-4">
    <!-- Header -->
    <div class="text-center mb-12">
      <span data-node="partners_tagline" data-node-type="text" data-node-label="Tagline" data-node-default="OUR PARTNERS" class="text-red-600 text-sm font-semibold uppercase tracking-wider mb-4 block">{{partners_tagline}}</span>

      <h2 data-node="partners_title" data-node-type="text" data-node-label="Title" data-node-default="Powered by Brands That Move With Us" class="text-3xl md:text-4xl lg:text-5xl font-bold text-black">
        {{partners_title}}
      </h2>
    </div>

    <!-- Logo Grid -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
      <!-- Partner 1 -->
      <div class="border border-gray-200 p-6 md:p-8 flex items-center justify-center h-24 md:h-28">
        <img data-node="partner1_logo" data-node-type="file" data-node-label="Partner 1 Logo" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765527159/seltrix/templates/ss-sports-running/partner-logo-1.png" src="{{partner1_logo}}" alt="Partner 1" class="max-h-12 w-auto object-contain grayscale hover:grayscale-0 transition-all">
      </div>

      <!-- Partner 2 -->
      <div class="border border-gray-200 p-6 md:p-8 flex items-center justify-center h-24 md:h-28">
        <img data-node="partner2_logo" data-node-type="file" data-node-label="Partner 2 Logo" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765527160/seltrix/templates/ss-sports-running/partner-logo-2.png" src="{{partner2_logo}}" alt="Partner 2" class="max-h-12 w-auto object-contain grayscale hover:grayscale-0 transition-all">
      </div>

      <!-- Partner 3 -->
      <div class="border border-gray-200 p-6 md:p-8 flex items-center justify-center h-24 md:h-28">
        <img data-node="partner3_logo" data-node-type="file" data-node-label="Partner 3 Logo" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765527161/seltrix/templates/ss-sports-running/partner-logo-3.png" src="{{partner3_logo}}" alt="Partner 3" class="max-h-12 w-auto object-contain grayscale hover:grayscale-0 transition-all">
      </div>

      <!-- Partner 4 -->
      <div class="border border-gray-200 p-6 md:p-8 flex items-center justify-center h-24 md:h-28">
        <img data-node="partner4_logo" data-node-type="file" data-node-label="Partner 4 Logo" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765527162/seltrix/templates/ss-sports-running/partner-logo-4.png" src="{{partner4_logo}}" alt="Partner 4" class="max-h-12 w-auto object-contain grayscale hover:grayscale-0 transition-all">
      </div>

      <!-- Partner 5 -->
      <div class="border border-gray-200 p-6 md:p-8 flex items-center justify-center h-24 md:h-28">
        <img data-node="partner5_logo" data-node-type="file" data-node-label="Partner 5 Logo" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765527163/seltrix/templates/ss-sports-running/partner-logo-5.png" src="{{partner5_logo}}" alt="Partner 5" class="max-h-12 w-auto object-contain grayscale hover:grayscale-0 transition-all">
      </div>

      <!-- Partner 6 -->
      <div class="border border-gray-200 p-6 md:p-8 flex items-center justify-center h-24 md:h-28">
        <img data-node="partner6_logo" data-node-type="file" data-node-label="Partner 6 Logo" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765527165/seltrix/templates/ss-sports-running/partner-logo-6.png" src="{{partner6_logo}}" alt="Partner 6" class="max-h-12 w-auto object-contain grayscale hover:grayscale-0 transition-all">
      </div>

      <!-- Partner 7 -->
      <div class="border border-gray-200 p-6 md:p-8 flex items-center justify-center h-24 md:h-28">
        <img data-node="partner7_logo" data-node-type="file" data-node-label="Partner 7 Logo" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765527166/seltrix/templates/ss-sports-running/partner-logo-7.png" src="{{partner7_logo}}" alt="Partner 7" class="max-h-12 w-auto object-contain grayscale hover:grayscale-0 transition-all">
      </div>

      <!-- Partner 8 -->
      <div class="border border-gray-200 p-6 md:p-8 flex items-center justify-center h-24 md:h-28">
        <img data-node="partner8_logo" data-node-type="file" data-node-label="Partner 8 Logo" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765527167/seltrix/templates/ss-sports-running/partner-logo-8.png" src="{{partner8_logo}}" alt="Partner 8" class="max-h-12 w-auto object-contain grayscale hover:grayscale-0 transition-all">
      </div>
    </div>
  </div>
</section>