Downloads Components in Asitrastudio library

<section class="relative bg-coolGray-50 overflow-hidden">
  <div class="relative container mx-auto px-4">
    <img class="hidden md:block absolute bottom-0 right-0 -mr-30 lg:-mr-40 xl:-mr-0 w-10/12 lg:w-auto" src="asitrastudio-assets/download/phone-right-xl.png" alt="">
    <div class="relative">
      <div class="max-w-sm md:max-w-md lg:max-w-lg mx-auto md:mx-0 py-12 md:py-40">
        <h2 class="font-heading text-5xl sm:text-6xl lg:text-7xl tracking-tight mb-8">Get our mobile app to make the process faster</h2>
        <p class="max-w-sm lg:max-w-md text-xl mb-12">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
        <div class="flex max-w-sm">
          <a class="inline-block mr-6" href="#">
            <img src="asitrastudio-assets/download/app-store.svg" alt="">
          </a>
          <a class="inline-block" href="#">
            <img src="asitrastudio-assets/download/google.svg" alt="">
          </a>
        </div>
      </div>
      <img class="block md:hidden w-full" src="asitrastudio-assets/download/phone-right-xl.png" alt="">
    </div>
  </div>
</section>

<section class="section py-0 is-relative is-clipped has-background-white">
  <div class="container is-relative">
    <img class="has-mw-4xl -mr-24-desktop-only is-absolute is-block-desktop is-hidden-touch is-bottom-0 is-right-0" src="asitrastudio-assets/download/phone-right-xl.png" alt="">
    <div class="is-relative">
      <div class="has-mw-sm has-mw-md-tablet has-mw-lg-desktop mx-auto mx-0-desktop pt-12 pt-20-tablet py-40-desktop pb-20">
        <h2 class="title is-size-3-mobile is-size-2-tablet mb-8" style="letter-spacing: -0.02em;">Get our mobile app to make the process faster</h2>
        <p class="has-mw-md subtitle mb-12 is-size-6">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
        <div class="has-mw-sm buttons is-flex-wrap-nowrap">
          <a class="mr-6 is-inline-block" href="#">
            <img class="image is-fullwidth" src="asitrastudio-assets/download/app-store.svg" alt="">
          </a>
          <a class="is-inline-block" href="#">
            <img class="image is-fullwidth" src="asitrastudio-assets/download/google.svg" alt="">
          </a>
        </div>
      </div>
      <img class="is-hidden-desktop image is-fullwidth has-mw-2xl mx-auto" src="asitrastudio-assets/download/phone-right-xl.png" alt="">
    </div>
  </div>
</section>

<section class="position-relative bg-light-light overflow-hidden">
  <div class="position-relative container"><img class="d-none d-md-block position-absolute bottom-0 end-0 me-md-n24 me-xl-0 col-md-10 col-xl-auto" src="asitrastudio-assets/download/phone-right-xl.png" alt=""/>
    <div class="position-relative">
      <div class="mw-sm mw-lg-lg mx-auto mx-md-0 pt-12 pb-20 pt-md-20 py-md-40">
        <h2 class="fs-1 mb-8" >Get our mobile app to make the process faster</h2>
        <p class="mw-md fs-6 mb-12" >
          It is a long established fact that a reader will be distracted by the readable content of a page when looking at its
          layout.
        </p>
        <div class="d-flex mw-sm"><a class="d-inline-block me-6" href="#"><img class="img-fluid" src="asitrastudio-assets/download/app-store.svg" alt=""/></a><a class="d-inline-block" href="#"><img class="img-fluid" src="asitrastudio-assets/download/google.svg" alt=""/></a></div>
      </div><img class="d-md-none img-fluid w-100" src="asitrastudio-assets/download/phone-right-xl.png" alt=""/>
    </div>
  </div>
</section>