Blog Components in Asitrastudio library

<section class="py-12 md:py-24 bg-coolGray-50">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4 mb-20 items-end">
      <div class="w-full sm:w-1/2 px-4 mb-8 sm:mb-0">
        <h1 class="font-heading text-6xl sm:text-8xl md:text-10xl tracking-tighter">Blog</h1>
      </div>
      <div class="w-full sm:w-1/2 px-4 text-right">
        <a class="group inline-flex items-center leading-none font-medium pb-2 border-b-2 border-black" href="#">
          <span class="mr-4">See our blog</span>
          <span class="group-hover:rotate-45 transform transition duration-100">
            <svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.5 1.5L1.5 9.5" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9.5 8.83571V1.5H2.16429" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </span>
        </a>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-5/12 xl:w-1/2 px-4 mb-10 lg:mb-0">
        <a class="relative group block h-135 sm:h-150 rounded-4xl overflow-hidden" href="#">
          <div class="absolute left-0 top-0 h-full w-full group-hover:bg-opacity-10 group-hover:bg-black transition duration-200"></div>
          <img class="block w-full h-full object-cover" src="asitrastudio-assets/blog/blog-shadow.png" alt="">
          <div class="absolute bottom-0 left-0 max-w-md lg:max-w-xl p-9">
            <div class="mb-3">
              <span class="inline-block mr-6 py-2 px-3 text-sm text-white group-hover:text-black leading-none border-1.5 border-white group-hover:bg-white rounded-full transition duration-200">Interior</span>
              <span class="inline-block text-sm text-white">9 min read</span>
            </div>
            <h3 class="text-4xl sm:text-5xl text-white tracking-tight">How to decorating ourdoor sofa</h3>
          </div>
        </a>
      </div>
      <div class="w-full lg:w-7/12 xl:w-1/2 px-4">
        <div class="flex flex-wrap -mx-4">
          <div class="w-full md:w-7/12 px-4 mb-10 md:mb-0">
            <a class="group block" href="#">
              <div class="relative mb-8 rounded-4xl overflow-hidden">
                <img class="block w-full h-full object-cover" src="asitrastudio-assets/blog/blog2.png" alt="">
                <div class="absolute left-0 top-0 h-full w-full group-hover:bg-opacity-10 group-hover:bg-black transition duration-200"></div>
              </div>
              <div class="max-w-xs">
                <div class="mb-3">
                  <span class="inline-block mr-6 py-2 px-3 text-sm text-black group-hover:text-white leading-none border-1.5 border-black group-hover:bg-black rounded-full transition duration-200">Interior</span>
                  <span class="inline-block text-sm text-coolGray-600 font-medium">9 min read</span>
                </div>
                <h4 class="text-3xl tracking-tight">How to decorating ourdoor sofa</h4>
              </div>
            </a>
          </div>
          <div class="w-full md:w-5/12 px-4">
            <a class="group block" href="#">
              <div class="relative mb-8 rounded-4xl overflow-hidden">
                <img class="block w-full h-full object-cover" src="asitrastudio-assets/blog/blog1.png" alt="">
                <div class="absolute left-0 top-0 h-full w-full group-hover:bg-opacity-10 group-hover:bg-black transition duration-200"></div>
              </div>
              <div class="max-w-xs">
                <div class="mb-3">
                  <span class="inline-block mr-6 py-2 px-3 text-sm text-black group-hover:text-white leading-none border-1.5 border-black group-hover:bg-black rounded-full transition duration-200">Interior</span>
                  <span class="inline-block text-sm text-coolGray-600 font-medium">9 min read</span>
                </div>
                <h4 class="text-3xl tracking-tight">How to decorating ourdoor sofa</h4>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section has-background-white-ter">
  <div class="container">
    <div class="mb-20 columns is-multiline is-align-items-end">
      <div class="column is-6-desktop mb-8 mb-0-desktop">
        <h1 class="title is-size-2-mobile is-size-1-tablet" style="letter-spacing: -0.04em;">Blog</h1>
      </div>
      <div class="column is-6-desktop has-text-right">
        <a class="button is-ghost px-0" href="#" style="height: 38px;">
          <span class="mr-2">See our blog</span>
          <svg class="is-rotate-45" width="11" height="11" viewbox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.5 1.5L1.5 9.5" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M9.5 8.83571V1.5H2.16429" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
      </div>
    </div>
    <div class="columns is-multiline">
      <div class="column is-12-tablet-only is-6-desktop mb-8 mb-0-desktop">
        <a class="box p-0 is-block is-relative" href="#" style="overflow: hidden;">
          <img class="is-block image is-fullwidth" style="max-height: 670px; min-height: 600px;" src="asitrastudio-assets/blog/blog-shadow.png" alt="">
          <div class="has-mw-md is-absolute is-bottom-0 is-left-0 p-10">
            <div class="mb-3">
              <span class="tag mr-3 has-text-dark">Interior</span>
              <span class="is-size-7 has-text-white is-inline-block">9 min read</span>
            </div>
            <h3 class="has-text-white is-size-3" style="letter-spacing: -0.02em">How to decorating ourdoor sofa</h3>
          </div>
        </a>
      </div>
      <div class="column is-12-tablet-only is-6-desktop">
        <div class="columns is-multiline" style="height: 100%">
          <div class="column is-7-tablet mb-8 mb-0-tablet">
            <a class="is-block" href="#">
              <img class="box p-0 mb-8 is-block image is-fullwidth" src="asitrastudio-assets/blog/blog2.png" alt="">
              <div class="has-mw-xs">
                <div class="mb-3">
                  <span class="tag is-light mr-3">Interior</span>
                  <span class="is-size-7 is-inline-block has-text-grey">9 min read</span>
                </div>
                <h4 class="is-size-4" style="letter-spacing: -0.02em">How to decorating ourdoor sofa</h4>
              </div>
            </a>
          </div>
          <div class="column is-5-tablet is-align-self-flex-end">
            <a class="is-block" href="#">
              <img class="box p-0 mb-8 is-block image is-fullwidth" src="asitrastudio-assets/blog/blog1.png" alt="">
              <div class="has-mw-xs">
                <div class="mb-3">
                  <span class="tag is-light mr-3">Interior</span>
                  <span class="is-size-7 is-inline-block has-text-grey">9 min read</span>
                </div>
                <h4 class="is-size-4" style="letter-spacing: -0.02em">How to decorating ourdoor sofa</h4>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-md-24 bg-light-light">
  <div class="container">
    <div class="row mb-20 align-items-end">
      <div class="col-12 col-lg-6 mb-8 mb-lg-0">
        <h1 >Blog</h1>
      </div>
      <div class="col-12 col-lg-6 text-end"><a class="d-inline-block pb-2 fw-semibold border-0 border-2 border-dark border-bottom" href="#"><span class="me-3" >See our blog</span>
          <svg class="rotate-45" width="11" height="11" viewbox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.5 1.5L1.5 9.5" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M9.5 8.83571V1.5H2.16429" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a></div>
    </div>
    <div class="row">
      <div class="col-12 col-lg-6 mb-8 mb-lg-0"><a class="d-block position-relative" href="#"><img class="d-block w-100 img-fluid rounded-5" style="max-height: 670px;" src="asitrastudio-assets/blog/blog-shadow.png" alt=""/>
          <div class="position-absolute bottom-0 start-0 mw-md mw-lg-xl p-9">
            <div class="mb-3"><span class="badge me-3 text-white border border-2 border-white" >Interior</span><span class="d-inline-block fs-9 text-white" >9 min read</span></div>
            <h3 class="fs-2 text-white" >How to decorating ourdoor sofa</h3>
          </div></a></div>
      <div class="col-12 col-lg-6">
        <div class="row h-100">
          <div class="col-12 col-md-7 mb-8 mb-md-0"><a class="d-block" href="#"><img class="d-block w-100 img-fluid mb-8 rounded-5" src="asitrastudio-assets/blog/blog2.png" alt=""/>
              <div class="mw-xs pe-5">
                <div class="mb-3"><span class="badge me-3 border border-dark" >Interior</span><span class="d-inline-block fs-9 text-secondary-light" >9 min read</span></div>
                <h4 class="fw-medium" >How to decorating ourdoor sofa</h4>
              </div></a></div>
          <div class="col-12 col-md-5 align-self-end"><a class="d-block" href="#"><img class="d-block w-100 img-fluid mb-8 rounded-5" src="asitrastudio-assets/blog/blog1.png" alt=""/>
              <div class="mw-xs pe-5">
                <div class="mb-3"><span class="badge me-3 border border-dark" >Interior</span><span class="d-inline-block fs-9 text-secondary-light" >9 min read</span></div>
                <h4 class="fw-medium" >How to decorating ourdoor sofa</h4>
              </div></a></div>
        </div>
      </div>
    </div>
  </div>
</section>