Bootstrap 5 Post Author Info Box

<!-- Author 1 - Bootstrap Brain Component -->
<section class="py-5">
  <div class="container overflow-hidden bsb-author-1">
    <div class="row justify-content-center gy-4 gy-md-0">
      <div class="col-12 col-md-3 col-xl-2 d-flex align-items-center justify-content-center">
        <img class="img-fluid rounded-circle author-avatar" loading="lazy" src="./assets/img/author-img-1.jpg" alt="Elio Evander">
      </div>
      <div class="col-12 col-md-8 col-lg-6 col-xl-5 d-flex align-items-center justify-content-center">
        <div class="text-center text-md-start author-content">
          <h5 class="text-secondary fs-7">Article written by</h5>
          <h2 class="fs-2 mb-3">Elio Evander</h2>
          <p class="mb-3">I am a QA tester and author with a passion for ensuring that software is of the highest quality. I have over 10 years of experience in the industry from small startups to large enterprises.</p>
          <p class="mb-0">
            <a href="#!" class="link-dark text-decoration-none">
              View More Items
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-short" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z" />
              </svg>
            </a>
          </p>
        </div>
      </div>
    </div>
  </div>
</section>