Knowledge Centre

<section class="homepage/sections/knowledge-centre bg-mint-500 w-full p-5 md:p-8 md:py-16">
  <div class="grid md:grid-cols-2 max-w-7xl m-auto gap-y-5 gap-x-12 items-center">
    <div>
      <h3 class="text-xl lg:text-2xl font-semibold">Knowledge Centre</h3>
      <p class="text-sm lg:text-base">Have any questions? Our in-depth guides and FAQ's have you covered</p>
    </div>

    <div class="grid lg:grid-cols-2 gap-x-8 gap-y-2">
      <a href="#" class="flex nowrap items-center border-t-2 border-zinc-950 border-opacity-10 py-3 transition-all hover:border-opacity-50">
        <img src="/assets/images/icons/Calendar-Dark.svg" alt="">
        <p class="flex-1 ml-2">Bookings</p>
        <img src="/assets/images/icons/Chevron-Right.svg" alt="">
      </a>
      <a href="#" class="flex nowrap items-center border-t-2 border-zinc-950 border-opacity-10 py-3 transition-all hover:border-opacity-50">
        <img src="/assets/images/icons/Buildings.svg" alt="">
        <p class="flex-1 ml-2">Facilities</p>
        <img src="/assets/images/icons/Chevron-Right.svg" alt="">
      </a>
      <a href="#" class="flex nowrap items-center border-t-2 border-zinc-950 border-opacity-10 py-3 transition-all hover:border-opacity-50">
        <img src="/assets/images/icons/Users.svg" alt="">
        <p class="flex-1 ml-2">Users</p>
        <img src="/assets/images/icons/Chevron-Right.svg" alt="">
      </a>
      <a href="#" class="flex nowrap items-center border-t-2 border-zinc-950 border-opacity-10 py-3 transition-all hover:border-opacity-50">
        <img src="/assets/images/icons/CreditCard.svg" alt="">
        <p class="flex-1 ml-2">Payments</p>
        <img src="/assets/images/icons/Chevron-Right.svg" alt="">
      </a>
    </div>
  </div>
</section>