@mixin cwui-people-grid {
  // Starts with fallback styles for the browsers that
  // don't support CSS Grid.
  .people-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  .people-grid__item {
    display: flex;
    margin-bottom: 1.875rem;
    flex-basis: 320px;
    // width: 100%;
  
    > :first-child {
      padding-right: .75rem;
    }
  
    @include breakpoint(large) {
      // width: 48%;
    }
  
    .name {
      color: $chico-red;
      display: inline-block;
      font-size: 1.25rem;
      line-height: 1.2;
      margin-bottom: .3125rem;
    }
  }
  
  .people-grid__item-photo-wrap {
    width: 40%;
  }

  .people-grid__item-photo {
    border: 3px solid #ddd6ca;
  }

  .people-grid__item-content {
    width: 60%;
  }
  
  .people-grid__item-content :last-child {
    margin-bottom: 0;
  }
  
  // For the lovely browsers that support `display: grid`
  @supports (display: grid) {
    .people-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      grid-gap: 1.875rem;
    }
  
    .people-grid__item {
      display: grid;
      grid-template-columns: minmax(100px, 120px) minmax(160px, 1fr);
      grid-gap: .75rem;
      margin-bottom: 0;
      width: inherit;

      & > * {
        width: inherit;
      }
    }
  
    .people-grid__item > :first-child {
      padding: 0;
    }
  }
}