<section data-component-type="Content" class="py-16 md:py-24 lg:py-32 overflow-hidden" data-component-slug="ss-sports-running-about">
  <div class="container mx-auto px-4">
    <div class="relative">
      <!-- Decorative Images - Desktop Only -->
      <img data-node="about_image_left" data-node-type="file" data-node-label="Left Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765527002/seltrix/templates/ss-sports-running/about-left.png" src="{{about_image_left}}" alt="Runner" class="hidden lg:block absolute top-0 left-0 w-72 h-80 object-cover">
      <img data-node="about_image_right" data-node-type="file" data-node-label="Right Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765527006/seltrix/templates/ss-sports-running/about-right.png" src="{{about_image_right}}" alt="Runner" class="hidden lg:block absolute top-16 right-0 w-72 h-96 object-cover">

      <!-- Content - Centered -->
      <div class="max-w-3xl mx-auto text-center relative z-10">
        <span data-node="about_tagline" data-node-type="text" data-node-label="Tagline" data-node-default="ABOUT THE CLUB" class="text-red-600 font-semibold text-sm uppercase tracking-wider">
          {{about_tagline}}
        </span>

        <h2 data-node="about_title" data-node-type="text" data-node-label="Title" data-node-default="Built for Runners, Open to Everyone" class="text-3xl md:text-4xl lg:text-5xl font-semibold text-black mt-4 mb-6">
          {{about_title}}
        </h2>

        <p data-node="about_description" data-node-type="textarea" data-node-label="Description" data-node-default="Whether you're lacing up for your first 3K or training for a marathon, our club brings together people who believe in progress not perfection." class="text-gray-600 text-lg md:text-xl mb-8 leading-relaxed">
          {{about_description}}
        </p>

        <a data-node="about_cta_link" data-node-type="url" data-node-label="CTA Link" data-node-default="#" href="{{about_cta_link}}" class="inline-block bg-red-600 text-white px-10 py-4 font-medium hover:bg-red-700 transition-colors">
          <span data-node="about_cta_text" data-node-type="text" data-node-label="CTA Text" data-node-default="Explore Offers">
            {{about_cta_text}}
          </span>
        </a>
      </div>
    </div>
  </div>
</section>