---
layout: default
title: Davenport Breakfast Club
permalink: /
---

<!-- Changed pt-[200px] to pt-[160px] to close the gap -->
<main class="text-center flex flex-col items-center pt-[220px]  animate-fadeIn">
  
  <h2 class="font-normal text-[55px] text-[#0C71C3] mb-4">Welcome!</h2>

  <h3 class="font-light text-[40px] text-[#0C71C3] mb-8">Latest News</h3>
  
  <!-- Grid width set to 60% (w-3/5) per your original CSS -->
  <div id="news-grid" class="w-3/5 grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-5 auto-rows-[150px]">
    
    <div class="news-item border border-[#303030] p-4 flex flex-col justify-center">
      <h4 class="font-bold text-lg">Whats happening</h4>
      <p class="text-sm text-gray-600">Dec 42, 2025 | News</p>
      <a class="text-blue-600 cursor-pointer hover:underline">read more</a>
    </div>

    <div class="news-item border border-[#303030] p-4 flex flex-col justify-center">
      <h4 class="font-bold text-lg">Whats happening</h4>
      <p class="text-sm text-gray-600">Dec 42, 2025 | News</p>
      <a class="text-blue-600 cursor-pointer hover:underline">read more</a>
    </div>

    <div class="news-item border border-[#303030] p-4 flex flex-col justify-center">
      <h4 class="font-bold text-lg">Whats happening</h4>
      <p class="text-sm text-gray-600">Dec 42, 2025 | News</p>
      <a class="text-blue-600 cursor-pointer hover:underline">read more</a>
    </div>
    
  </div>
</main>