Person component centering

[skoolbus39]

This is the only CSS that needs to be added:

<style>
  .unlcms-centered-teaser-person-list > li {
    flex-basis: 31.57rem;
  }
</style>

Everything else is handled by utility classes in the markup:

<ul class="dcf-d-flex dcf-flex-wrap dcf-jc-center unlcms-centered-teaser-person-list dcf-col-gap-vw dcf-row-gap-8 dcf-mb-12" role="list">
  <li class="dcf-flex-grow-1 dcf-w-max-md dcf-mb-0 dcf-card-as-link unlcms-img-zoom-hover" itemscope itemtype="https://schema.org/Person">
    <div class="dcf-d-flex dcf-flex-nowrap dcf-col-gap-5 dcf-row-gap-2 unlcms-centered-teaser-person">
      <div class="unlcms-centered-teaser-person-img dcf-h-12 dcf-w-12 dcf-flex-shrink-0">
        <div class="dcf-ratio dcf-ratio-1x1 dcf-circle unl-bg-light-gray">
          <img class="dcf-ratio-child dcf-obj-fit-cover" src="https://ucomm.unl.edu/images/directory/lewis.jpg" itemprop="image" alt="">
        </div>
      </div>
      <div class="unlcms-centered-teaser-person-text dcf-as-center">
        <div class="dcf-lh-2 dcf-mb-1"><a href="#" class="dcf-txt-h5 dcf-bold dcf-card-link dcf-txt-decor-hover unl-ls-h" itemprop="name">Clay Lewis</a></div>
        <div class="dcf-lh-3 dcf-txt-sm dcf-italic" itemprop="jobTitle">D&amp;D (Designer of Dungeons / Developer of Dragons)</div>
        <address class="dcf-mt-3">
          <dl class="dcf-txt-sm dcf-mb-0">
            <dt class="dcf-sr-only">Phone</dt>
            <dd class="dcf-d-flex dcf-col-gap-2 dcf-ai-center">
              <div class="dcf-h-4 dcf-w-4 unl-gray">
                <svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M5.001 5h14v14h-14zM5.001 20v1.5A2.501 2.501 0 0 0 7.5 24h9c1.378 0 2.5-1.121 2.5-2.5V20H5.001zM12 22.5a1.001 1.001 0 0 1 0-2 1.001 1.001 0 0 1 0 2zM19 4V2.5C19 1.121 17.878 0 16.5 0h-9a2.501 2.501 0 0 0-2.499 2.5V4H19zM9.5 2h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1z"/><path fill="none" d="M0 0h24v24H0z"/>
                </svg>
              </div>
              <a class="dcf-txt-decor-hover" href="tel:+14024727211" itemprop="telephone">
                <span class="dcf-txt-nowrap">402-472-7211</span>
              </a>
            </dd>
            <dt class="dcf-sr-only">Email</dt>
            <dd class="dcf-d-flex dcf-col-gap-2 dcf-ai-center">
              <div class="dcf-h-4 dcf-w-4 unl-gray">
                <svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 24 24" aria-hidden="true">
                  <path d="m12.002 12.36 10.095-8.03A1.99 1.99 0 0 0 21.001 4h-18c-.387 0-.746.115-1.053.307l10.054 8.053z"/><path d="m22.764 5.076-10.468 8.315a.488.488 0 0 1-.594-.001L1.26 5.036c-.16.287-.259.612-.26.964v11c.001 1.103.898 2 2.001 2h17.998c1.103 0 2-.897 2.001-2V6c0-.335-.09-.647-.236-.924z"/><path fill="none" d="M0 0h24v24H0z"/>
                </svg>
              </div>
              <a class="dcf-txt-decor-hover" href="mailto:clewis25@unl.edu" itemprop="email">
                <span class="dcf-txt-nowrap">clewis25@unl.edu</span>
              </a>
            </dd>
          </dl>
        </address>
      </div>
    </div>
  </li>
</ul>