.person-loop ul.people {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding-left: 0;
  justify-content: space-between;
  align-items: flex-start; }
  .person-loop ul.people li.staff-member {
    flex: 0 1 19.5%;
    margin-right: 5.5%;
    text-align: center;
    margin-bottom: 2em; }
    .person-loop ul.people li.staff-member:nth-child(4n) {
      margin-right: 0; }
    .person-loop ul.people li.staff-member h2 {
      text-transform: uppercase;
      font-family: "IBM Sans Condensed Medium", Helvetica, Arial, Lucida, sans-serif;
      line-height: 1.3;
      font-size: 1.15rem;
      letter-spacing: 2px; }
      .person-loop ul.people li.staff-member h2 a:hover {
        color: #39b8d5; }
    .person-loop ul.people li.staff-member p {
      font-size: 16px; }
  .person-loop ul.people li.is-on-leadership a {
    display: block;
    height: 100%; }
  .person-loop ul.people li.is-on-leadership .image-container {
    width: 100%;
    height: 250px;
    background-size: cover;
    background-position: 50% 0;
    background-repeat: no-repeat;
    margin-bottom: 1.5rem; }
  .person-loop ul.people li.is-on-leadership p {
    color: #3d3d3d;
    margin-bottom: .75rem; }
  .person-loop ul.people li.is-on-leadership:hover {
    background-color: #fff;
    transition: background-color 500ms ease; }
    .person-loop ul.people li.is-on-leadership:hover h2 {
      transition: color 500ms ease;
      color: #39b8d5; }

@media screen and (max-width: 882px) {
  .person-loop ul.people li.staff-member {
    flex: 0 1 42%; }
    .person-loop ul.people li.staff-member:nth-child(4n) {
      margin-right: 0; } }
@media screen and (max-width: 430px) {
  .person-loop ul.people li.staff-member {
    flex: 0 1 100%; }
    .person-loop ul.people li.staff-member:nth-child(4n) {
      margin-right: 0; } }
@supports (grid-gap: 2em) {
  .person-loop ul.people {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 2em; }
    .person-loop ul.people li.staff-member {
      margin: 0; }
    @media screen and (max-width: 882px) {
      .person-loop ul.people {
        grid-template-columns: repeat(2, 1fr); } }
    @media screen and (max-width: 430px) {
      .person-loop ul.people {
        grid-template-columns: 1fr; } } }

/*# sourceMappingURL=style.css.map */