4 per line

_includes/person-cards-small.html

 <div class="people">
 {% for person in include.people %}{% assign row = forloop.index | modulo: include.people.size %}
 {% if row == 1%}<div class="card-deck-wrapper"><div class="card-deck">{% endif %}
-<div class="card">
+<div class="card p-0">
   <div class="card-block text-xs-center people">
     <a href="{{ person.url }}">
       {% include person-photo-small.html %}

_includes/person-cards.html

 <div class="people">
-{% for person in include.people %}{% assign row = forloop.index | modulo: 3 %}
+{% for person in include.people %}{% assign row = forloop.index | modulo: 4 %}
 {% if row == 1%}<div class="card-deck-wrapper"><div class="card-deck">{% endif %}
 <div class="card">
   <div class="card-block text-xs-center people">
     <a href="{{ person.url }}">
       {% include person-photo.html %}
-      <h4 class="card-title">{{ person.firstname }} {{ person.lastname }}</h4>
+      <h6 class="card-title" style="font-weight:bold">{{ person.firstname }} {{ person.lastname }}</h6>
     </a>
     <h6 class="card-subtitle text-muted">{{ person.position }}</h6>
   </div>

assets/blog.scss

@@ -255,6 +255,7 @@ h6, .h6 {
   .person-img-small {
     margin-left: auto;
     margin-right: auto;
+    margin-bottom: 0.4em;
     width: 60px;
     text-align: center;
     display: block;
@@ -267,7 +268,8 @@ h6, .h6 {
 .person-img {
   margin-left: auto;
   margin-right: auto;
-  width: 160px;
+  margin-bottom: 0.5em;
+  width: 140px;
   text-align: center;
   display: block;
 }