.team-grid-container {
  padding: 30px 0;
}
.team-grid .col {
  position: relative;
  cursor: pointer;
  padding-top: 12px;
  padding-bottom: 12px;
  aspect-ratio: 1/1;
}
.team-grid .col button.open-modal {
  display: block;
}
.team-grid .col p.overlay-name {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 12px;
}
.team-grid .col p {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.team-grid .col img {
  display: block;
}
.team-grid .col .overlay {
  background-color: rgba(200, 114, 28, 0.86);
  color: #fff;
  position: absolute;
  left: 12px; top: 12px; right: 12px; bottom: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  opacity: 0;
}
.team-grid .col:hover .overlay{
  opacity: 1;
}
.team-modal .whm-modal-body{
  width: 100%;
  max-width: 1020px;
  background-color: #fff;
  border: 1px solid #707070;
}
.team-popup{
  display: block;
}

.team-popup .bio-pic{
  width: 100%;
  aspect-ratio: 1/1;
}
.team-popup .bio-content{
  width: 100%;
  padding: 2.5rem 1.875rem;
  font-size: 1rem;
}
.team-popup .bio-content *{
  color: var(--grey-dark);
}
.team-popup .bio-content a{
  color: var(--orange);
  text-decoration: none;
}
.team-popup .bio-content a:hover{
  text-decoration: underline;
}
.team-popup .bio-name{
  font-size: 1.5rem;
  font-weight: 500;
}
.team-popup .bio-title{
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.team-popup .bio-text{
  line-height: 1.70;
  margin-bottom: 0.625rem;
}
.team-popup .bio-li svg{
  width: 25px;
}
.team-popup .bio-li a *{
  color: var(--orange);
}
.team-popup .bio-li a:hover *{
  color: var(--grey-dark);
}
.team-modal.whm-modal .whm-modal-body .close{
  top: 15px;
  right: 15px;
  width: 22px;
  height: 22px;
  border-radius: 100%;
  background-color: var(--orange);
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: 20px;
}
.team-modal.whm-modal .whm-modal-body .close:hover{
  color: #fff;
  text-decoration: none;
}
.team-modal .close .whm-modal-close{
  display: none;
}
@media (min-width: 768px) {
  .team-grid-container {
    padding: 100px 0;
  }
  .team-popup{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
  .team-popup .bio-pic{
    aspect-ratio: auto;
  }
  .team-popup .bio-content{
    padding-left: 3.125rem;
    padding-right: 3.125rem;
  }
}