
<section>
  <!-- Container -->
  <div class="mx-auto w-full max-w-7xl px-5 py-16 md:px-10 md:py-20">
    <!-- Component -->
    <div class="flex flex-col items-center">
      <h2 class="text-center text-3xl font-bold md:text-5xl">
        The latest and greatest news
      </h2>
      <p class="mb-8 mt-4 text-center text-sm text-gray-500 sm:text-base md:mb-12 lg:mb-16">
        Lorem ipsum dolor sit amet elit ut aliquam
      </p>
      <!-- Content -->
      <div class="mb-8 grid gap-5 sm:grid-cols-2 sm:justify-items-stretch md:mb-12 md:grid-cols-3 lg:mb-16 lg:gap-6">
        <!-- Item -->
        <a href="javascript:void(0);" class="flex flex-col gap-4 bg-white rounded-md shadow px-4 py-8 md:p-0">
          <img src="<?= image() ?>" alt="" class="rounded-t-lg object-cover" />
          <div class="flex flex-col items-start pb-5 px-4">
            
            <p class="mb-4 text-xl font-bold md:text-2xl">
              The latest news with Flowspark
            </p>
            <div class="flex flex-col items-start text-sm text-gray-500 lg:flex-row lg:items-center">
              <p>Laila Bahar</p>
              <p class="mx-2 hidden lg:block">-</p>
              <p>6 mins read</p>
            </div>
          </div>
        </a>
        <!-- Item -->
        <a href="javascript:void(0);" class="flex flex-col gap-4 bg-white rounded-md shadow px-4 py-8 md:p-0">
          <img src="<?= image() ?>" alt="" class="rounded-t-lg object-cover" />
          <div class="flex flex-col items-start pb-5 px-4">
            
            <p class="mb-4 text-xl font-bold md:text-2xl">
              The latest news with Flowspark
            </p>
            <div class="flex flex-col items-start text-sm text-gray-500 lg:flex-row lg:items-center">
              <p>Laila Bahar</p>
              <p class="mx-2 hidden lg:block">-</p>
              <p>6 mins read</p>
            </div>
          </div>
        </a>
        <!-- Item -->
        <a href="javascript:void(0);" class="flex flex-col gap-4 bg-white rounded-md shadow px-4 py-8 md:p-0">
          <img src="<?= image() ?>" alt="" class="rounded-t-lg object-cover" />
          <div class="flex flex-col items-start pb-5 px-4">
            
            <p class="mb-4 text-xl font-bold md:text-2xl">
              The latest news with Flowspark
            </p>
            <div class="flex flex-col items-start text-sm text-gray-500 lg:flex-row lg:items-center">
              <p>Laila Bahar</p>
              <p class="mx-2 hidden lg:block">-</p>
              <p>6 mins read</p>
            </div>
          </div>
        </a>
      </div>
      <!-- Button -->
      <a href="javascript:void(0);" class="rounded-md bg-black px-6 py-3 text-center font-semibold text-white">
        View More
      </a>
    </div>
  </div>
</section>
