Referral Card

<div class="referral-cards--horizontal-cntr">
  <div class="referral-card--horizontal__small col-12 col-lg-12 col-md-8 m-auto">
    <article>
      <div class="col-12 col-xxl-4 col-lg-5">
        <figure class="referral-card--horizontal__small-image d-flex align-items-center">
          <div class="position-relative">
            <img src="./assets/component-images/faculty-v1.svg" />
            <figcaption class="text-primary border-primary"> Lorem ipsum dolor sit amet </figcaption>
          </div>
        </figure>
      </div>
      <div class="col-12 col-xxl-8 col-lg-7 justify-content-center d-flex flex-column referral-card--horizontal__small-textcntr">
        <header class="referral-card--horizontal__small-title"> Lorem ipsum dolor sit amet consectetur </header>
        <div>
          <aside class="referral-card--horizontal__small-intro"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </aside>
          <aside class="referral-card--horizontal__small-duration">
            <div class="item border-primary">
              <b>Lorem ipsum: </b>Month Date Year
            </div>
            <div class="item border-primary">
              <b>Lorem: </b>Ipsum
            </div>
            <div class="item border-primary">
              <b>Lorem: </b>ipsum
            </div>
          </aside>
          <aside class="referral-card--horizontal__small-description">
            <p>
              <b>Sed ut perspiciatis unde omnis iste natus error sit voluptatem:</b>
            </p>
            <ul>
              <li>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</li>
              <li>Lorem ipsum dolor sit amet, consectetur</li>
              <li>Excepteur sint occaecat cupidatat non proident</li>
              <li> Lorem ipsum dolor sit amet, consectetur </li>
              <li> Sed ut perspiciatis unde omnis iste natus error sit voluptatem </li>
              <li> Sed ut perspiciatis unde omnis iste natus error sit voluptatem </li>
            </ul>
          </aside>
          <div class="learnmore-collaboration">
            <div class="referral-card--horizontal-button">
              <div class="ph-btn">
                <button class="btn btn--secondary btn--regular">Button</button>
              </div>
            </div>
            <div class="referral-card--horizontal-collaboration">Lorem ipsum dolor sit amet <img alt="Image Alt Text" title="Image Title" loading="lazy" width="83" height="23" decoding="async" data-nimg="1" src="./assets/component-images/240*80px.svg" style="color: transparent;">
            </div>
          </div>
        </div>
      </div>
    </article>
  </div>
</div>

<div class="referral-cards--horizontal-cntr">
 <div class="referral-card--horizontal__small col-12 col-lg-12 col-md-8 m-auto reverse-order">
   <article>
     <div class="col-12 col-xxl-4 col-lg-5">
       <figure class="referral-card--horizontal__small-image d-flex align-items-center float-end">
         <div class="position-relative">
           <img src="./assets/component-images/faculty-v1.svg" />
           <figcaption class="text-primary border-primary"> Lorem ipsum dolor sit amet </figcaption>
         </div>
       </figure>
     </div>
     <div class="col-12 col-xxl-8 col-lg-7 justify-content-center d-flex flex-column referral-card--horizontal__small-textcntr">
       <header class="referral-card--horizontal__small-title"> Lorem ipsum dolor sit amet consectetur </header>
       <div>
         <aside class="referral-card--horizontal__small-intro"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </aside>
         <aside class="referral-card--horizontal__small-duration">
           <div class="item border-primary">
             <b>Lorem ipsum: </b>Month Date Year
           </div>
           <div class="item border-primary">
             <b>Lorem: </b>Ipsum
           </div>
           <div class="item border-primary">
             <b>Lorem: </b>ipsum
           </div>
         </aside>
         <aside class="referral-card--horizontal__small-description">
           <p>
             <b>Sed ut perspiciatis unde omnis iste natus error sit voluptatem:</b>
           </p>
           <ul>
             <li>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</li>
             <li>Lorem ipsum dolor sit amet, consectetur</li>
             <li>Excepteur sint occaecat cupidatat non proident</li>
             <li> Lorem ipsum dolor sit amet, consectetur </li>
             <li> Sed ut perspiciatis unde omnis iste natus error sit voluptatem </li>
             <li> Sed ut perspiciatis unde omnis iste natus error sit voluptatem </li>
             <li>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</li>
             <li>Lorem ipsum dolor sit amet, consectetur</li>
             <li>Excepteur sint occaecat cupidatat non proident</li>
             <li> Lorem ipsum dolor sit amet, consectetur </li>
             <li> Sed ut perspiciatis unde omnis iste natus error sit voluptatem </li>
             <li> Sed ut perspiciatis unde omnis iste natus error sit voluptatem </li>
           </ul>
         </aside>
         <div class="referral-card--horizontal__small-button">
           <button class="btn btn--primary">Button</button>
         </div>
       </div>
     </div>
   </article>
 </div>
</div>