/*leader.css */

.elder {
  padding: 30px;
  display:grid;
  grid-template-columns: 23% 23% 23% 23%;
  justify-content: space-evenly;
  row-gap:10px;
}

.deacon {
  padding: 30px;
  display:grid;
  grid-template-columns: 19% 19% 19% 19% 19%;
  row-gap:10px;
  justify-content: space-evenly;
 }

.card {
  text-align: center;
}

.elder .card {
  padding:15px;
}

.deacon .card {
  padding:12px;
}

.card-body {
  padding: 0;
}

.card-title{
  margin: 10px 0 0 0;
}

.modal-img {
  width: 30%;
  float: left;
  padding-right: 15px;
}

@media only screen and (max-width: 800px){
  .elder, .deacon {
    padding: 15px;
  }

  .elder .card {
    padding:12px;
  }

  .deacon .card {
    padding:10px;
  }

  .card-title {
    font-size:0.9em;
  }
  .card-text {
    font-size:0.9em;
  }

}

@media only screen and (max-width: 576px){
  .elder {
    grid-template-columns: 45% 45%;
  }

  .deacon {
    grid-template-columns: 32% 32% 32%;
    padding: 15px 10px;
  }

  .elder .card {
    padding:10px;
  }

  .deacon .card {
    padding:8px;
  }
}