Masonry sections

<!-- Masonry Cards -->
<div class="max-w-6xl px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
  <!-- Grid -->
  <div class="grid sm:grid-cols-12 gap-6">
    <div class="sm:self-end col-span-12 sm:col-span-7 md:col-span-8 lg:col-span-5 lg:col-start-3">
      <!-- Card -->
      <a class="group relative block rounded-xl overflow-hidden" href="#">
        <div class="aspect-w-12 aspect-h-7 sm:aspect-none rounded-xl overflow-hidden">
          <img class="group-hover:scale-105 transition-transform duration-500 ease-in-out rounded-xl w-full object-cover" src="/assets/images/app-toolkit/placeholder-1.jpg" alt="Image Description">
        </div>
        <div class="absolute bottom-0 left-0 right-0 p-2 sm:p-4">
          <div class="text-sm font-bold text-hs2-primary rounded-lg bg-white p-4 md:text-xl ">
            Lorem ipsum dolor sit amet
          </div>
        </div>
      </a>
      <!-- End Card -->
    </div>
    <!-- End Col -->

    <div class="sm:self-end col-span-12 sm:col-span-5 md:col-span-4 lg:col-span-3">
      <!-- Card -->
      <a class="group relative block rounded-xl overflow-hidden" href="#">
        <div class="aspect-w-12 aspect-h-7 sm:aspect-none rounded-xl overflow-hidden">
          <img class="group-hover:scale-105 transition-transform duration-500 ease-in-out rounded-xl w-full object-cover" src="/assets/images/app-toolkit/placeholder-2.jpg" alt="Image Description">
        </div>
        <div class="absolute bottom-0 left-0 right-0 p-2 sm:p-4">
          <div class="text-sm font-bold text-hs2-primary rounded-lg bg-white p-4 md:text-xl ">
            Lorem ipsum dolor sit amet
          </div>
        </div>
      </a>
      <!-- End Card -->
    </div>
    <!-- End Col -->

    <div class="col-span-12 md:col-span-4">
      <!-- Card -->
      <a class="group relative block rounded-xl overflow-hidden" href="#">
        <div class="aspect-w-12 aspect-h-7 sm:aspect-none rounded-xl overflow-hidden">
          <img class="group-hover:scale-105 transition-transform duration-500 ease-in-out rounded-xl w-full object-cover" src="/assets/images/app-toolkit/placeholder-3.jpg" alt="Image Description">
        </div>
        <div class="absolute bottom-0 left-0 right-0 p-2 sm:p-4">
          <div class="text-sm font-bold text-hs2-primary rounded-lg bg-white p-4 md:text-xl ">
            Lorem ipsum dolor sit amet
          </div>
        </div>
      </a>
      <!-- End Card -->
    </div>
    <!-- End Col -->

    <div class="col-span-12 sm:col-span-6 md:col-span-4">
      <!-- Card -->
      <a class="group relative block rounded-xl overflow-hidden" href="#">
        <div class="aspect-w-12 aspect-h-7 sm:aspect-none rounded-xl overflow-hidden">
          <img class="group-hover:scale-105 transition-transform duration-500 ease-in-out rounded-xl w-full object-cover" src="/assets/images/app-toolkit/placeholder-4.jpg" alt="Image Description">
        </div>
        <div class="absolute bottom-0 left-0 right-0 p-2 sm:p-4">
          <div class="text-sm font-bold text-hs2-primary rounded-lg bg-white p-4 md:text-xl ">
            Lorem ipsum dolor sit amet
          </div>
        </div>
      </a>
      <!-- End Card -->
    </div>
    <!-- End Col -->

    <div class="col-span-12 sm:col-span-6 md:col-span-4">
      <!-- Card -->
      <a class="group relative block rounded-xl overflow-hidden" href="#">
        <div class="aspect-w-12 aspect-h-7 sm:aspect-none rounded-xl overflow-hidden">
          <img class="group-hover:scale-105 transition-transform duration-500 ease-in-out rounded-xl w-full object-cover" src="/assets/images/app-toolkit/placeholder-5.jpg" alt="Image Description">
        </div>
        <div class="absolute bottom-0 left-0 right-0 p-2 sm:p-4">
          <div class="text-sm font-bold text-hs2-primary rounded-lg bg-white p-4 md:text-xl ">
            Lorem ipsum dolor sit amet
          </div>
        </div>
      </a>
      <!-- End Card -->
    </div>
    <!-- End Col -->
  </div>
  <!-- End Grid -->
</div>
<!-- End Masonry Cards -->