@if (mobileService.isMobile()) {
  <ul class="list pl0 mt0 measure center">
    <li
      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/spl.png"/>
      <div class="pl3 flex-auto">
        <span class="f6 db black-70">Juliahna Seidler</span>
      </div>
    </li>
    <li
      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/aspl.png"/>
      <div class="pl3 flex-auto">
        <span class="f6 db black-70">Kenzie Witherow</span>
      </div>
    </li>
    <li
      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/aspl.png"/>
      <div class="pl3 flex-auto">
        <span class="f6 db black-70">Carlie Sorrell</span>
      </div>
    </li>
    <li
      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/qm.png"/>
      <div class="pl3 flex-auto">
        <span class="f6 db black-70">Ella Mercer</span>
      </div>
    </li>
    <li
      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/scribe.png"/>
      <div class="pl3 flex-auto">
        <span class="f6 db black-70">Nora Wilson</span>
      </div>
    </li>
    <li
      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/pl.png"/>
      <div class="pl3 flex-auto">
        <span class="f6 db black-70">Avery Elliot</span>
      </div>
    </li>
    <li
      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/pl.png"/>
      <div class="pl3 flex-auto">
        <span class="f6 db black-70">Locklyn Linebaugh</span>
      </div>
    </li>
    <li
      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/historian.png"/>
      <div class="pl3 flex-auto">
        <span class="f6 db black-70">Natalie Sorrell</span>
      </div>
    </li>
    <li
      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/librarian.png"/>
      <div class="pl3 flex-auto">
        <span class="f6 db black-70">Kenzie Elliot</span>
      </div>
    </li>
    <li
      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/dc.png"/>
      <div class="pl3 flex-auto">
        <span class="f6 db black-70">Locklyn Linebaugh</span>
      </div>
    </li>
  </ul>
} @else {
  <div class="cf">
    <div class="fl w-20 tc pv1 bg-transparent">
      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
        <div class="tc">
          <img src="titles/spl.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Senior Patrol Leader">
          <h1 class="f3 mb2">Juliahna Seidler</h1>
        </div>
      </article>
    </div>
    <div class="fl w-20 tc pv1 bg-transparent">
      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
        <div class="tc">
          <img src="titles/aspl.png" class="br-100 h4 w4 dib ba b--black-05 pa2"
               title="Assistant Senior Patrol Leader">
          <h1 class="f3 mb2">Kenzie Witherow</h1>
        </div>
      </article>
    </div>
    <div class="fl w-20 tc pv1 bg-transparent">
      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
        <div class="tc">
          <img src="titles/oeg.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Outdoor Ethics Guide">
          <h1 class="f3 mb2">Carlie Sorrell</h1>
        </div>
      </article>
    </div>
    <div class="fl w-20 tc pv1 bg-transparent">
      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
        <div class="tc">
          <img src="titles/qm.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Quarter Master">
          <h1 class="f3 mb2">Ella Mercer</h1>
        </div>
      </article>
    </div>
    <div class="fl w-20 tc pv1 bg-transparent">
      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
        <div class="tc">
          <img src="titles/scribe.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Scribe">
          <h1 class="f3 mb2">Nora Wilson</h1>
        </div>
      </article>
    </div>
  </div>
  <div class="cf">
    <div class="fl w-20 tc pv1 bg-transparent">
      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
        <div class="tc">
          <img src="titles/pl.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Patrol Leader">
          <h1 class="f3 mb2">Avery Elliot</h1>
        </div>
      </article>
    </div>
    <div class="fl w-20 tc pv1 bg-transparent">
      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
        <div class="tc">
          <img src="titles/pl.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Patrol Leader">
          <h1 class="f3 mb2">Locklyn Linebaugh</h1>
        </div>
      </article>
    </div>
    <div class="fl w-20 tc pv1 bg-transparent">
      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
        <div class="tc">
          <img src="titles/historian.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Historian">
          <h1 class="f3 mb2">Natalie Sorrell</h1>
        </div>
      </article>
    </div>
    <div class="fl w-20 tc pv1 bg-transparent">
      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
        <div class="tc">
          <img src="titles/librarian.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Librarian">
          <h1 class="f3 mb2">Kenzie Elliot</h1>
        </div>
      </article>
    </div>
    <div class="fl w-20 tc pv1 bg-transparent">
      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
        <div class="tc">
          <img src="titles/dc.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Den Chief">
          <h1 class="f3 mb2">Locklyn Linebaugh</h1>
        </div>
      </article>
    </div>
  </div>
}