
<section>
  <!-- Container -->
  <div class="mx-auto w-full max-w-7xl px-5 py-16 md:px-10 md:py-20">
    <!-- Title -->
    <h2 class="text-center mb-16 text-3xl font-bold md:text-5xl">
      The latest and greatest news
    </h2>
    <!-- Content -->
    <div class="mx-auto grid max-w-xl gap-5">
      <a href="javascript:void(0);" class="flex flex-col items-center pb-8 text-center border-b border-gray-300 sm:flex-row sm:text-left">
        <img src="<?= image(640,480) ?>" alt="" class="max-w-40 rounded-xl shadow-2xl" />
        <div class="px-8">
          <p class="mb-6 text-sm font-bold sm:text-base lg:mb-8">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit ut
          </p>
          <p class="text-sm text-gray-500">November 12, 2022</p>
        </div>
      </a>
      <a href="javascript:void(0);" class="flex flex-col items-center pb-8 text-center border-b border-gray-300 sm:flex-row sm:text-left">
        <img src="<?= image(640,480) ?>" alt="" class="max-w-40 rounded-xl shadow-2xl" />
        <div class="px-8">
          <p class="mb-6 text-sm font-bold sm:text-base lg:mb-8">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit ut
          </p>
          <p class="text-sm text-gray-500">November 12, 2022</p>
        </div>
      </a>
      <a href="javascript:void(0);" class="flex flex-col items-center pb-8 text-center border-b border-gray-300 sm:flex-row sm:text-left">
        <img src="<?= image(640,480) ?>" alt="" class="max-w-40 rounded-xl shadow-2xl" />
        <div class="px-8">
          <p class="mb-6 text-sm font-bold sm:text-base lg:mb-8">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit ut
          </p>
          <p class="text-sm text-gray-500">November 12, 2022</p>
        </div>
      </a>
    </div>
  </div>
</section>
