vertical trio

index.html

<div class="xs-mb6 xs-mx-auto" style="max-width: 580px">
    <div class="clearfix gutters xs-mb5">
      <div class="col xs-col-2 sm-col-2">
        <div class="circle xs-text-center xs-align-middle" style="height: 4rem; width: 4rem; line-height: 4rem; border: 2px solid #79589F">
          <div class="xs-text-2 text-purple" style="line-height: 3.8rem !important;">1</div>
        </div>
      </div>
      <div class="col xs-col-10 sm-col-10">
        <h3 class="bold xs-mb1">AKBD</h3>
        <p class="xs-text-5">Industry newcomers can make an immediate impression on prospective clients and employers by earning this entry-level certification. A minimum of two years of kitchen/bath industry experience is required.</p>
      </div>
    </div>
    <div class="clearfix gutters xs-mb5">
      <div class="col xs-col-3">
        <div class="circle xs-text-center xs-align-middle" style="height: 4rem; width: 4rem; line-height: 4rem; border: 2px solid #79589F">
          <div class="xs-text-2 text-purple" style="line-height: 3.8rem !important;">2</div>
        </div>
      </div>
      <div class="col xs-col-9">
        <h3 class="bold xs-mb1">AKBD</h3>
        <p class="xs-text-5">Industry newcomers can make an immediate impression on prospective clients and employers by earning this entry-level certification. A minimum of two years of kitchen/bath industry experience is required.</p>
      </div>
    </div>
    <div class="clearfix gutters xs-mb5">
      <div class="col xs-col-3">
        <div class="circle xs-text-center xs-align-middle" style="height: 4rem; width: 4rem; line-height: 4rem; border: 2px solid #79589F">
          <div class="xs-text-2 text-purple" style="line-height: 3.8rem !important;">3</div>
        </div>
      </div>
      <div class="col xs-col-9">
        <h3 class="bold xs-mb1">AKBD</h3>
        <p class="xs-text-5">Industry newcomers can make an immediate impression on prospective clients and employers by earning this entry-level certification. A minimum of two years of kitchen/bath industry experience is required.</p>
      </div>
    </div>
  </div>

initiatives.html

<div class="container xs-pt5 xs-pb6">
    <h2 class="xs-text-1 xs-mb4 xs-text-center bold">Initiatives</h2>
    <div class="xs-block-grid-2 lg-block-grid-4">
      <div class="block-grid__item">
        <a href="" class="media-card xs-relative xs-block" >
          <div class="media-cover"></div>
          <div class="xs-l0 xs-b0 xs-absolute" style="height: 246px">
            <div class="xs-align-bottom xs-text-center xs-p2" style="display: table-cell; height: 246px;">
              <h2 class="xs-text-2 xs-mb1 sm-text-1 text-white">30 under 30</h2>
              <p class="xs-text-6 sm-text-5 text-white">Check out the brightest young entrepreneurs, leaders, stars </p>
            </div>
          </div>
        </a>
      </div>
      <div class="block-grid__item">
        <a href="" class="media-card xs-relative xs-block" >
          <div class="media-cover"></div>
          <div class="xs-l0 xs-b0 xs-absolute" style="height: 246px">
            <div class="xs-align-bottom xs-text-center xs-p2" style="display: table-cell; height: 246px;">
              <h2 class="xs-text-2 xs-mb1 sm-text-1 text-white">KBIS 2016</h2>
              <p class="xs-text-6 sm-text-5 text-white">Check out the brightest young entrepreneurs, leaders, stars </p>
            </div>
          </div>
        </a>
      </div>
      <div class="block-grid__item">
        <a href="" class="media-card xs-relative xs-block" >
          <div class="media-cover"></div>
          <div class="xs-l0 xs-b0 xs-absolute" style="height: 246px">
            <div class="xs-align-bottom xs-text-center xs-p2" style="display: table-cell; height: 246px;">
              <h2 class="xs-text-2 xs-mb1 sm-text-1 text-white">Voices from the Industry</h2>
              <p class="xs-text-6 sm-text-5 text-white">Check out the brightest young entrepreneurs, leaders, stars </p>
            </div>
          </div>
        </a>
      </div>
      <div class="block-grid__item">
        <a href="" class="media-card xs-relative xs-block fill-gray " >
          <div class="media-cover fill-gray"></div>
          <div class="xs-l0 xs-b0 xs-absolute" style="height: 246px">
            <div class="xs-align-bottom xs-text-center xs-p2" style="display: table-cell; height: 246px;">
              <h2 class="xs-text-2 xs-mb1 sm-text-1 text-white">2016 Design Competition</h2>
              <p class="xs-text-6 sm-text-5 text-white">Check out the brightest young entrepreneurs, leaders, stars </p>
            </div>
          </div>
        </a>
      </div>
    </div>
</div>