<section class=" pt-5 relative bg-white mb-5" data-component-type="Content" data-component-slug="sports-template-Upcoming-games">

  <div class="max-w-[90%] mx-auto pb-5 p-5 relative w-full">

    <!-- TITLE -->
    <div class="text-center">
      <h1 class="text-dark text-[40px] font-bold mt-3 mb-3" data-node="upcoming_GAMES" data-node-type="text" data-node-label=" UPCOMING GAMES ttile" data-node-default=" UPCOMING GAMES">
       {{upcoming_GAMES}}
      </h1>
      <p class="text-[#999] text-[20px] font-bold" data-node="upcoming_GAMES_desc" data-node-type="text" data-node-label=" UPCOMING GAMES description" data-node-default=" Lorem ipsum dolor sit amet consectetur. Justo enim">
       {{upcoming_GAMES_desc}}
      </p>
      <p class="text-[#999] text-[20px] font-bold" data-node="upcoming_GAMES_desc2" data-node-type="text" data-node-label=" UPCOMING GAMES description2" data-node-default=" diam massa aliquam condimentum et mauris leo">
       {{upcoming_GAMES_desc2}}
      </p>
    </div>

    <!-- SLIDER -->
    <div class="relative overflow-hidden mt-[50px]">

      <!-- TRACK -->
      <div id="sliderTrack" class="flex transition-transform duration-700 ease-in-out gap-5">

        <!-- SLIDE -->
        <div class="slide min-w-[100%] md:min-w-[50%] lg:min-w-[33.333%] flex justify-center">
          <img data-node="upcoming_GAMES_image1" data-node-type="file" data-node-label=" UPCOMING GAMES image1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338095/seltrix/templates/sports-template/UPCOMINGGAMES_images/img1.png" src="{{upcoming_GAMES_image1}}" class="max-w-xs w-full  border">
        </div>

        <div class="slide min-w-[100%] md:min-w-[50%] lg:min-w-[33.333%] flex justify-center">
          <img src="{{upcoming_GAMES_image2}}" data-node="upcoming_GAMES_image2" data-node-type="file" data-node-label=" UPCOMING GAMES image2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338096/seltrix/templates/sports-template/UPCOMINGGAMES_images/img2.png" class="max-w-xs w-full  border">
        </div>

        <div class="slide min-w-[100%] md:min-w-[50%] lg:min-w-[33.333%] flex justify-center">
          <img class="max-w-xs w-full  border" src="{{upcoming_GAMES_image3}}" data-node="upcoming_GAMES_image3" data-node-type="file" data-node-label=" UPCOMING GAMES image3" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338097/seltrix/templates/sports-template/UPCOMINGGAMES_images/img3.png">
        </div>

        <div class="slide min-w-[100%] md:min-w-[50%] lg:min-w-[33.333%] flex justify-center">
          <img src="{{upcoming_GAMES_image4}}" data-node="upcoming_GAMES_image4" data-node-type="file" data-node-label=" UPCOMING GAMES image4" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338095/seltrix/templates/sports-template/UPCOMINGGAMES_images/img1.png" class="max-w-xs w-full  border">
        </div>

      </div>
    </div>
  </div>

  <!-- BUTTONS -->
  <div id="prevBtn" class="hidden lg:flex absolute left-5 xl:bottom-[130px] lg:bottom-[120px]
           w-12 h-12 rounded-full bg-[#AEB0B3] z-10 flex items-center justify-center">
           <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767444596/seltrix/templates/sports-template/left.png" class="w-3 h-3">
           
</div>

  <div id="nextBtn" class="hidden lg:flex absolute right-5 xl:bottom-[130px] lg:bottom-[120px]
           w-12 h-12 rounded-full bg-[#AEB0B3] z-10 flex items-center justify-center">
           <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767444600/seltrix/templates/sports-template/rigth.png" class="w-3 h-3">
</div>

  <!-- PAGINATION -->
  <div id="pagination" class="flex justify-center gap-2 mt-10"></div>

</section>