Bootstrap 5 Hero Blob Image Section Example

<!-- Hero 2 - Bootstrap Brain Component -->
<section class="bsb-hero-2 px-3">
  <div class="container overflow-hidden">
    <div class="row gy-3 gy-lg-0 align-items-lg-center justify-content-lg-between">
      <div class="col-12 col-lg-6 order-1 order-lg-0">
        <h1 class="display-3 fw-bold mb-3">Art of Design</h1>
        <p class="fs-4 mb-5">Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.</p>
        <div class="d-grid gap-2 d-sm-flex">
          <button type="button" class="btn btn-primary bsb-btn-3xl rounded-pill">Free Consultation</button>
          <button type="button" class="btn btn-outline-primary bsb-btn-3xl rounded-pill">Buy Credits</button>
        </div>
      </div>
      <div class="col-12 col-lg-5 text-center">
        <img class="img-fluid" loading="lazy" src="./assets/img/hero-img-1.jpg" alt="" style="-webkit-mask-image: url(./assets/img/hero-img-blob-1.svg); mask-image: url(./assets/img/hero-img-blob-1.svg);">
      </div>
    </div>
  </div>
</section>