News Slider

<section class="my-16 relative">
  <header class="flex flex-col lg:flex-row lg:justify-between lg:items-center space-y-5 mx-auto max-w-7xl px-5">
    <h3 class="h5 text-gradient-dark">Latest news & articles</h3>
    <div class="flex justify-between lg:justify-normal w-full lg:w-auto items-center">
      <nav>
        <button id="scroll-left" class="hover:text-mint-500 p-1 disabled:text-gray-300 transition-all" disabled>
          <svg class="text-current" width="34" height="24" viewBox="0 0 34 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.93934 10.9393C0.353553 11.5251 0.353553 12.4749 0.93934 13.0607L10.4853 22.6066C11.0711 23.1924 12.0208 23.1924 12.6066 22.6066C13.1924 22.0208 13.1924 21.0711 12.6066 20.4853L4.12132 12L12.6066 3.51472C13.1924 2.92893 13.1924 1.97919 12.6066 1.3934C12.0208 0.807611 11.0711 0.807611 10.4853 1.3934L0.93934 10.9393ZM34 10.5H2V13.5H34V10.5Z"/>
          </svg>
        </button>
        <button id="scroll-right" class="hover:text-mint-500 p-1 disabled:text-gray-300 transition-all" disabled>
          <svg class="text-current transform rotate-180" width="34" height="24" viewBox="0 0 34 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.93934 10.9393C0.353553 11.5251 0.353553 12.4749 0.93934 13.0607L10.4853 22.6066C11.0711 23.1924 12.0208 23.1924 12.6066 22.6066C13.1924 22.0208 13.1924 21.0711 12.6066 20.4853L4.12132 12L12.6066 3.51472C13.1924 2.92893 13.1924 1.97919 12.6066 1.3934C12.0208 0.807611 11.0711 0.807611 10.4853 1.3934L0.93934 10.9393ZM34 10.5H2V13.5H34V10.5Z"/>
          </svg>
        </button>
      </nav>
      <a href="" class="button button button--tertiary bg-gray-100 rounded-full ml-4">View more</a>
    </div>
  </header>
  
  <div id="slider" class="overflow-x-scroll overflow-y-hidden no-scrollbar flex flex-row gap-4 md:gap-7 py-12 w-full px-5">
    
    <a href="/pages/demos/blog-article-page/" class="card--picture transition-all flex-shrink-0 inline-block w-56 sm:w-72">
  <div class="relative rounded-lg overflow-hidden h-36 ">
    <div class="absolute inset-0 bg-picture-overlay"></div>
    <img src="/assets/images/cards/rugby.jpeg" alt="5 Must-Have Amenities for Modern Sports Facilities" class="w-full h-full object-cover"><span class="absolute bottom-3 left-3 bg-lemon-500 font-bold px-3 py-0.5">News</span></div>
  <div class="flex flex-col">
    <h6 class="font-semibold tracking-none text-sm/4 ">5 Must-Have Amenities for Modern Sports Facilities</h6>
    <p class="text-gray-600 mt-2 line-clamp-2 text-xs">Discover the essential amenities that elevate sports facilities to a whole new level of comfort and convenience.</p>
  </div>
</a>

    
    <a href="/pages/demos/blog-article-page/" class="card--picture transition-all flex-shrink-0 inline-block w-56 sm:w-72">
  <div class="relative rounded-lg overflow-hidden h-36 ">
    <div class="absolute inset-0 bg-picture-overlay"></div>
    <img src="/assets/images/cards/conference.jpg" alt="The Green Revolution: Sustainable Practices in Sports Facility Management" class="w-full h-full object-cover"><span class="absolute bottom-3 left-3 bg-mint-500 font-bold px-3 py-0.5">Blog</span></div>
  <div class="flex flex-col">
    <h6 class="font-semibold tracking-none text-sm/4 ">The Green Revolution: Sustainable Practices in Sports Facility Management</h6>
    <p class="text-gray-600 mt-2 line-clamp-2 text-xs">Explore how sports facilities are embracing eco-friendly initiatives to minimize their environmental impact.</p>
  </div>
</a>

    
    <a href="/pages/demos/blog-article-page/" class="card--picture transition-all flex-shrink-0 inline-block w-56 sm:w-72">
  <div class="relative rounded-lg overflow-hidden h-36 ">
    <div class="absolute inset-0 bg-picture-overlay"></div>
    <img src="/assets/images/cards/rugby.jpeg" alt="The Ultimate Venue Guide: Finding the Perfect Space for Your Event" class="w-full h-full object-cover"><span class="absolute bottom-3 left-3 bg-lemon-500 font-bold px-3 py-0.5">News</span></div>
  <div class="flex flex-col">
    <h6 class="font-semibold tracking-none text-sm/4 ">The Ultimate Venue Guide: Finding the Perfect Space for Your Event</h6>
    <p class="text-gray-600 mt-2 line-clamp-2 text-xs">Explore a comprehensive guide to selecting the ideal venue that aligns with your event&#39;s theme, size, and logistical needs.</p>
  </div>
</a>

    
    <a href="/pages/demos/blog-article-page/" class="card--picture transition-all flex-shrink-0 inline-block w-56 sm:w-72">
  <div class="relative rounded-lg overflow-hidden h-36 ">
    <div class="absolute inset-0 bg-picture-overlay"></div>
    <img src="/assets/images/cards/track.jpg" alt="Creating a Winning Atmosphere: The Role of Sports Facility Lighting" class="w-full h-full object-cover"><span class="absolute bottom-3 left-3 bg-lemon-500 font-bold px-3 py-0.5">News</span></div>
  <div class="flex flex-col">
    <h6 class="font-semibold tracking-none text-sm/4 ">Creating a Winning Atmosphere: The Role of Sports Facility Lighting</h6>
    <p class="text-gray-600 mt-2 line-clamp-2 text-xs">Delve into the fascinating world of sports facility lighting and its impact on enhancing performance and spectator experience.</p>
  </div>
</a>

    
    <a href="/pages/demos/blog-article-page/" class="card--picture transition-all flex-shrink-0 inline-block w-56 sm:w-72">
  <div class="relative rounded-lg overflow-hidden h-36 ">
    <div class="absolute inset-0 bg-picture-overlay"></div>
    <img src="/assets/images/cards/rugby.jpeg" alt="Inclusive Sports Facilities: Designing for Accessible and Diverse Athlete Communities" class="w-full h-full object-cover"><span class="absolute bottom-3 left-3 bg-mint-500 font-bold px-3 py-0.5">Blog</span></div>
  <div class="flex flex-col">
    <h6 class="font-semibold tracking-none text-sm/4 ">Inclusive Sports Facilities: Designing for Accessible and Diverse Athlete Communities</h6>
    <p class="text-gray-600 mt-2 line-clamp-2 text-xs">Discover the importance of creating inclusive sports facilities that cater to the diverse needs of athletes of all abilities.</p>
  </div>
</a>

    
    <a href="/pages/demos/blog-article-page/" class="card--picture transition-all flex-shrink-0 inline-block w-56 sm:w-72">
  <div class="relative rounded-lg overflow-hidden h-36 ">
    <div class="absolute inset-0 bg-picture-overlay"></div>
    <img src="/assets/images/cards/conference.jpg" alt="5 Must-Have Amenities for Modern Sports Facilities" class="w-full h-full object-cover"><span class="absolute bottom-3 left-3 bg-lemon-500 font-bold px-3 py-0.5">News</span></div>
  <div class="flex flex-col">
    <h6 class="font-semibold tracking-none text-sm/4 ">5 Must-Have Amenities for Modern Sports Facilities</h6>
    <p class="text-gray-600 mt-2 line-clamp-2 text-xs">Discover the essential amenities that elevate sports facilities to a whole new level of comfort and convenience.</p>
  </div>
</a>

    
    <a href="/pages/demos/blog-article-page/" class="card--picture transition-all flex-shrink-0 inline-block w-56 sm:w-72">
  <div class="relative rounded-lg overflow-hidden h-36 ">
    <div class="absolute inset-0 bg-picture-overlay"></div>
    <img src="/assets/images/cards/rugby.jpeg" alt="The Ultimate Venue Guide: Finding the Perfect Space for Your Event" class="w-full h-full object-cover"><span class="absolute bottom-3 left-3 bg-lemon-500 font-bold px-3 py-0.5">News</span></div>
  <div class="flex flex-col">
    <h6 class="font-semibold tracking-none text-sm/4 ">The Ultimate Venue Guide: Finding the Perfect Space for Your Event</h6>
    <p class="text-gray-600 mt-2 line-clamp-2 text-xs">Explore a comprehensive guide to selecting the ideal venue that aligns with your event&#39;s theme, size, and logistical needs.</p>
  </div>
</a>

    
    <a href="/pages/demos/blog-article-page/" class="card--picture transition-all flex-shrink-0 inline-block w-56 sm:w-72">
  <div class="relative rounded-lg overflow-hidden h-36 ">
    <div class="absolute inset-0 bg-picture-overlay"></div>
    <img src="/assets/images/cards/track.jpg" alt="Creating a Winning Atmosphere: The Role of Sports Facility Lighting" class="w-full h-full object-cover"><span class="absolute bottom-3 left-3 bg-lemon-500 font-bold px-3 py-0.5">News</span></div>
  <div class="flex flex-col">
    <h6 class="font-semibold tracking-none text-sm/4 ">Creating a Winning Atmosphere: The Role of Sports Facility Lighting</h6>
    <p class="text-gray-600 mt-2 line-clamp-2 text-xs">Delve into the fascinating world of sports facility lighting and its impact on enhancing performance and spectator experience.</p>
  </div>
</a>

    
    <a href="/pages/demos/blog-article-page/" class="card--picture transition-all flex-shrink-0 inline-block w-56 sm:w-72">
  <div class="relative rounded-lg overflow-hidden h-36 ">
    <div class="absolute inset-0 bg-picture-overlay"></div>
    <img src="/assets/images/cards/rugby.jpeg" alt="Inclusive Sports Facilities: Designing for Accessible and Diverse Athlete Communities" class="w-full h-full object-cover"><span class="absolute bottom-3 left-3 bg-mint-500 font-bold px-3 py-0.5">Blog</span></div>
  <div class="flex flex-col">
    <h6 class="font-semibold tracking-none text-sm/4 ">Inclusive Sports Facilities: Designing for Accessible and Diverse Athlete Communities</h6>
    <p class="text-gray-600 mt-2 line-clamp-2 text-xs">Discover the importance of creating inclusive sports facilities that cater to the diverse needs of athletes of all abilities.</p>
  </div>
</a>

    
    <a href="/pages/demos/blog-article-page/" class="card--picture transition-all flex-shrink-0 inline-block w-56 sm:w-72">
  <div class="relative rounded-lg overflow-hidden h-36 ">
    <div class="absolute inset-0 bg-picture-overlay"></div>
    <img src="/assets/images/cards/conference.jpg" alt="5 Must-Have Amenities for Modern Sports Facilities" class="w-full h-full object-cover"><span class="absolute bottom-3 left-3 bg-lemon-500 font-bold px-3 py-0.5">News</span></div>
  <div class="flex flex-col">
    <h6 class="font-semibold tracking-none text-sm/4 ">5 Must-Have Amenities for Modern Sports Facilities</h6>
    <p class="text-gray-600 mt-2 line-clamp-2 text-xs">Discover the essential amenities that elevate sports facilities to a whole new level of comfort and convenience.</p>
  </div>
</a>

    
    <a href="/pages/demos/blog-article-page/" class="card--picture transition-all flex-shrink-0 inline-block w-56 sm:w-72">
  <div class="relative rounded-lg overflow-hidden h-36 ">
    <div class="absolute inset-0 bg-picture-overlay"></div>
    <img src="/assets/images/cards/track.jpg" alt="The Green Revolution: Sustainable Practices in Sports Facility Management" class="w-full h-full object-cover"><span class="absolute bottom-3 left-3 bg-mint-500 font-bold px-3 py-0.5">Blog</span></div>
  <div class="flex flex-col">
    <h6 class="font-semibold tracking-none text-sm/4 ">The Green Revolution: Sustainable Practices in Sports Facility Management</h6>
    <p class="text-gray-600 mt-2 line-clamp-2 text-xs">Explore how sports facilities are embracing eco-friendly initiatives to minimize their environmental impact.</p>
  </div>
</a>

    
    <a href="/pages/demos/blog-article-page/" class="card--picture transition-all flex-shrink-0 inline-block w-56 sm:w-72">
  <div class="relative rounded-lg overflow-hidden h-36 ">
    <div class="absolute inset-0 bg-picture-overlay"></div>
    <img src="/assets/images/cards/rugby.jpeg" alt="5 Must-Have Amenities for Modern Sports Facilities" class="w-full h-full object-cover"><span class="absolute bottom-3 left-3 bg-lemon-500 font-bold px-3 py-0.5">News</span></div>
  <div class="flex flex-col">
    <h6 class="font-semibold tracking-none text-sm/4 ">5 Must-Have Amenities for Modern Sports Facilities</h6>
    <p class="text-gray-600 mt-2 line-clamp-2 text-xs">Discover the essential amenities that elevate sports facilities to a whole new level of comfort and convenience.</p>
  </div>
</a>

    
  </div>
</section>