Blog Components in Gradia library

<section class="pt-20 pb-36 bg-black overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="md:max-w-lg mx-auto text-center mb-20">
      <h2 class="mb-4 font-heading font-semibold text-white text-6xl sm:text-7xl" >Latest news</h2>
      <p class="text-lg text-gray-400" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p>
    </div>
    <div class="flex flex-wrap -m-3">
      <div class="w-full md:w-1/2 xl:w-1/4 p-3"><a class="group" href="#">
          <div class="group flex flex-col justify-end h-full relative overflow-hidden rounded-10"><img class="mx-auto w-full transform group-hover:scale-110 transition ease-out duration-500" src="gradia-assets/images/blog/blog1.png" alt="">
            <div class="absolute bottom-0 left-0 w-full p-2.5">
              <div class="p-5 w-full bg-black bg-opacity-80 rounded-md">
                <h2 class="mb-2 font-heading font-medium text-xs uppercase text-gray-400 tracking-px" >Technology  .  4 min read</h2>
                <p class="font-heading font-semibold text-lg text-white group-hover:underline" >You will never believe these bizarre truth of travel.</p>
              </div>
            </div>
          </div></a></div>
      <div class="w-full md:w-1/2 xl:w-1/4 p-3"><a class="group" href="#">
          <div class="group flex flex-col justify-end h-full relative overflow-hidden rounded-10"><img class="mx-auto w-full transform group-hover:scale-110 transition ease-out duration-500" src="gradia-assets/images/blog/blog2.png" alt="">
            <div class="absolute bottom-0 left-0 w-full p-2.5">
              <div class="p-5 w-full bg-black bg-opacity-80 rounded-md">
                <h2 class="mb-2 font-heading font-medium text-xs uppercase text-gray-400 tracking-px" >Technology  .  4 min read</h2>
                <p class="font-heading font-semibold text-lg text-white group-hover:underline" >You will never believe these bizarre truth of travel.</p>
              </div>
            </div>
          </div></a></div>
      <div class="w-full md:w-1/2 xl:w-1/4 p-3"><a class="group" href="#">
          <div class="group flex flex-col justify-end h-full relative overflow-hidden rounded-10"><img class="mx-auto w-full transform group-hover:scale-110 transition ease-out duration-500" src="gradia-assets/images/blog/blog3.png" alt="">
            <div class="absolute bottom-0 left-0 w-full p-2.5">
              <div class="p-5 w-full bg-black bg-opacity-80 rounded-md">
                <h2 class="mb-2 font-heading font-medium text-xs uppercase text-gray-400 tracking-px" >Technology  .  4 min read</h2>
                <p class="font-heading font-semibold text-lg text-white group-hover:underline" >You will never believe these bizarre truth of travel.</p>
              </div>
            </div>
          </div></a></div>
      <div class="w-full md:w-1/2 xl:w-1/4 p-3"><a class="group" href="#">
          <div class="group flex flex-col justify-end h-full relative overflow-hidden rounded-10"><img class="mx-auto w-full transform group-hover:scale-110 transition ease-out duration-500" src="gradia-assets/images/blog/blog4.png" alt="">
            <div class="absolute bottom-0 left-0 w-full p-2.5">
              <div class="p-5 w-full bg-black bg-opacity-80 rounded-md">
                <h2 class="mb-2 font-heading font-medium text-xs uppercase text-gray-400 tracking-px" >Technology  .  4 min read</h2>
                <p class="font-heading font-semibold text-lg text-white group-hover:underline" >You will never believe these bizarre truth of travel.</p>
              </div>
            </div>
          </div></a></div>
    </div>
  </div>
</section>

<section class="pt-20 pb-36 bg-black overflow-hidden">
  <div class="container">
    <div class="text-center mw-lg mx-auto mb-20">
      <h2 class="fs-10 fw-semibold text-white mb-4" >Latest news</h2>
      <p class="fs-17 text-secondary-light" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p>
    </div>
    <div class="row g-6">
      <div class="col-12 col-md-6 col-lg-3"><a href="#">
          <div class="position-relative mw-100"><img class="w-100 rounded-3" src="gradia-assets/images/blog/blog1.png" alt=""/>
            <div class="position-absolute bottom-0 start-0 w-100 rounded-3">
              <div class="p-2">
                <div class="bg-black bg-opacity-75 p-4 w-100 rounded-3"><span class="d-inline-block fs-20 fw-medium text-secondary-light text-uppercase mb-2" style="letter-spacing: 1px;" >Technology  .  4 min read</span>
                  <h3 class="fs-17 fw-semibold lh-sm text-white mb-0" >You will never believe these bizarre truth of travel.</h3>
                </div>
              </div>
            </div>
          </div></a></div>
      <div class="col-12 col-md-6 col-lg-3"><a href="#">
          <div class="position-relative mw-100"><img class="w-100 rounded-3" src="gradia-assets/images/blog/blog2.png" alt=""/>
            <div class="position-absolute bottom-0 start-0 w-100 rounded-3">
              <div class="p-2">
                <div class="bg-black bg-opacity-75 p-4 w-100 rounded-3"><span class="d-inline-block fs-20 fw-medium text-secondary-light text-uppercase mb-2" style="letter-spacing: 1px;" >Technology  .  4 min read</span>
                  <h3 class="fs-17 fw-semibold lh-sm text-white mb-0" >You will never believe these bizarre truth of travel.</h3>
                </div>
              </div>
            </div>
          </div></a></div>
      <div class="col-12 col-md-6 col-lg-3"><a href="#">
          <div class="position-relative mw-100"><img class="w-100 rounded-3" src="gradia-assets/images/blog/blog3.png" alt=""/>
            <div class="position-absolute bottom-0 start-0 w-100 rounded-3">
              <div class="p-2">
                <div class="bg-black bg-opacity-75 p-4 w-100 rounded-3"><span class="d-inline-block fs-20 fw-medium text-secondary-light text-uppercase mb-2" style="letter-spacing: 1px;" >Technology  .  4 min read</span>
                  <h3 class="fs-17 fw-semibold lh-sm text-white mb-0" >You will never believe these bizarre truth of travel.</h3>
                </div>
              </div>
            </div>
          </div></a></div>
      <div class="col-12 col-md-6 col-lg-3"><a href="#">
          <div class="position-relative mw-100"><img class="w-100 rounded-3" src="gradia-assets/images/blog/blog4.png" alt=""/>
            <div class="position-absolute bottom-0 start-0 w-100 rounded-3">
              <div class="p-2">
                <div class="bg-black bg-opacity-75 p-4 w-100 rounded-3"><span class="d-inline-block fs-20 fw-medium text-secondary-light text-uppercase mb-2" style="letter-spacing: 1px;" >Technology  .  4 min read</span>
                  <h3 class="fs-17 fw-semibold lh-sm text-white mb-0" >You will never believe these bizarre truth of travel.</h3>
                </div>
              </div>
            </div>
          </div></a></div>
    </div>
  </div>
</section>