<section data-component-type="EventsIntro" class="pt-16 xl:pt-24 bg-white" data-component-slug="marathon-events-intro">
  <div class="mx-auto px-6 lg:px-16 xl:px-[95px]">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 xl:gap-16 items-start">
      <!-- Left Column - Label and Title -->
      <div>
        <!-- Section Label -->
        <span data-node="events_intro_label" data-node-type="text" data-node-label="Section Label" data-node-default="OUR EVENTS" class="text-sm tracking-[0.2em] text-black font-bold uppercase mb-4 block">{{events_intro_label}}</span>

        <!-- Title -->
        <h2 data-node="events_intro_title" data-node-type="text" data-node-label="Section Title" data-node-default="Run Experiences That Inspire Everyone" class="text-4xl md:text-5xl xl:text-6xl leading-tight font-['Racing_Sans_One'] text-black">
          {{events_intro_title}}
        </h2>
      </div>

      <!-- Right Column - Description -->
      <div class="lg:pt-8">
        <p data-node="events_intro_description" data-node-type="textarea" data-node-label="Section Description" data-node-default="From community jogs to competitive races, our events bring together runners of every age and pace. Each race is crafted to challenge your limits while delivering an experience you'll never forget." class="text-[#656A74] text-base xl:text-xl leading-relaxed">
          {{events_intro_description}}
        </p>
      </div>
    </div>
  </div>
</section>