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

      <h2 data-node="highlights_title" data-node-type="text" data-node-label="Title" data-node-default="Designed for Runners, Driven by Passion" class="text-3xl md:text-4xl lg:text-5xl font-bold text-black">
        {{highlights_title}}
      </h2>
    </div>

    <!-- Feature Cards -->
    <div class="space-y-4">
      <!-- Feature 1 -->
      <div class="bg-gray-100 p-6 md:p-8 flex flex-col md:flex-row items-center gap-6">
        <div class="text-5xl md:text-6xl font-light text-gray-300 md:w-24 shrink-0">01</div>
        <div class="flex-1">
          <h3 data-node="feature1_title" data-node-type="text" data-node-label="Feature 1 Title" data-node-default="Scenic Routes" class="text-xl md:text-2xl font-bold text-black mb-2">
            {{feature1_title}}
          </h3>
          <p data-node="feature1_desc" data-node-type="textarea" data-node-label="Feature 1 Description" data-node-default="Beautifully mapped paths that turn every mile into a rewarding, visually inspiring experience." class="text-gray-600">
            {{feature1_desc}}
          </p>
        </div>
        <img data-node="feature1_image" data-node-type="file" data-node-label="Feature 1 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765527020/seltrix/templates/ss-sports-running/event-feature-1.png" src="{{feature1_image}}" alt="Scenic routes" class="w-full md:w-64 h-48 object-cover">
      </div>

      <!-- Feature 2 -->
      <div class="bg-gray-100 p-6 md:p-8 flex flex-col md:flex-row items-center gap-6">
        <div class="text-5xl md:text-6xl font-light text-gray-300 md:w-24 shrink-0">02</div>
        <div class="flex-1">
          <h3 data-node="feature2_title" data-node-type="text" data-node-label="Feature 2 Title" data-node-default="All-Level Categories" class="text-xl md:text-2xl font-bold text-black mb-2">
            {{feature2_title}}
          </h3>
          <p data-node="feature2_desc" data-node-type="textarea" data-node-label="Feature 2 Description" data-node-default="Walk, jog, or sprint, choose the distance that fits your style and keeps your pace feeling natural." class="text-gray-600">
            {{feature2_desc}}
          </p>
        </div>
        <img data-node="feature2_image" data-node-type="file" data-node-label="Feature 2 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765527021/seltrix/templates/ss-sports-running/event-feature-2.png" src="{{feature2_image}}" alt="All-level categories" class="w-full md:w-64 h-48 object-cover">
      </div>

      <!-- Feature 3 -->
      <div class="bg-gray-100 p-6 md:p-8 flex flex-col md:flex-row items-center gap-6">
        <div class="text-5xl md:text-6xl font-light text-gray-300 md:w-24 shrink-0">03</div>
        <div class="flex-1">
          <h3 data-node="feature3_title" data-node-type="text" data-node-label="Feature 3 Title" data-node-default="Community Energy" class="text-xl md:text-2xl font-bold text-black mb-2">
            {{feature3_title}}
          </h3>
          <p data-node="feature3_desc" data-node-type="textarea" data-node-label="Feature 3 Description" data-node-default="Experience unmatched motivation with runners who uplift every step and fuel your momentum forward." class="text-gray-600">
            {{feature3_desc}}
          </p>
        </div>
        <img data-node="feature3_image" data-node-type="file" data-node-label="Feature 3 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765527022/seltrix/templates/ss-sports-running/event-feature-3.png" src="{{feature3_image}}" alt="Community energy" class="w-full md:w-64 h-48 object-cover">
      </div>

      <!-- Feature 4 -->
      <div class="bg-gray-100 p-6 md:p-8 flex flex-col md:flex-row items-center gap-6">
        <div class="text-5xl md:text-6xl font-light text-gray-300 md:w-24 shrink-0">04</div>
        <div class="flex-1">
          <h3 data-node="feature4_title" data-node-type="text" data-node-label="Feature 4 Title" data-node-default="Pro-Led Warmups" class="text-xl md:text-2xl font-bold text-black mb-2">
            {{feature4_title}}
          </h3>
          <p data-node="feature4_desc" data-node-type="textarea" data-node-label="Feature 4 Description" data-node-default="Guided sessions from certified coaches designed to prepare your mind and muscles for a stronger start." class="text-gray-600">
            {{feature4_desc}}
          </p>
        </div>
        <img data-node="feature4_image" data-node-type="file" data-node-label="Feature 4 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765527023/seltrix/templates/ss-sports-running/event-feature-4.png" src="{{feature4_image}}" alt="Pro-led warmups" class="w-full md:w-64 h-48 object-cover">
      </div>
    </div>
  </div>
</section>