.bio-list {
  display: flex;
  flex-wrap: wrap;
  margin-left: -2rem;
  margin-right: -2rem; }
  .bio-list .bio-list-item {
    padding: 1rem 2rem;
    width: 100%; }
  .bio-list .bg-image {
    display: block;
    width: 100%;
    height: 0;
    padding-top: 60%;
    background-color: #e9ecef;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; }

@media (min-width: 540px) {
  .bio-list.columns-2 .bio-list-item,
  .bio-list.columns-3 .bio-list-item,
  .bio-list.columns-4 .bio-list-item,
  .bio-list.columns-5 .bio-list-item,
  .bio-list.columns-6 .bio-list-item {
    width: 50%; } }

@media (min-width: 768px) {
  .bio-list.columns-5 .bio-list-item,
  .bio-list.columns-6 .bio-list-item {
    width: 33.3333%; } }

@media (min-width: 1024px) {
  .bio-list.columns-3 .bio-list-item {
    width: 33.3333%; }
  .bio-list.columns-4 .bio-list-item {
    width: 25%; }
  .bio-list.columns-5 .bio-list-item {
    width: 20%; }
  .bio-list.columns-6 .bio-list-item {
    width: 16.6666667%; } }