.team-members, .team-members-container {
  display: flex;
  gap: 25px;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}
.team-member__header img{
  background-color: var(--primary-black);
}
.team-member__header-content {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.team-member__description {
  text-align: left;
  height: 0;
  overflow: hidden;
  padding: 0px 30px;
  transition: height .25s ease-out;
}

.team-member__inner p{
  font-size: 12px !important;
}
.item-overlay {
  padding: 20px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: background: var(--primary-white);;
  overflow: hidden;
  text-align: center;
  width: 100%;
  -moz-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
  -webkit-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
  transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
}
.item-overlay.right {

  right: 200%;
  left: -100%;
}
.team-member {
  flex: 0 1 calc(20% - 20px);
  position: relative;
  float: left;
  overflow: hidden;
  min-width: 180px;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 1 / 1;
  background: var(--primary-black);
}
.team-member .swap-on-hover {
  margin-bottom: 0px;
}

.swap-on-hover {
  position: relative;
  margin: 0 auto;

  overflow: hidden;
  max-width: 100%;
  height: auto;
}
.team-member__description {
  position: absolute;
  transform: translateY(-50%);
  margin: 0 auto;
  right: 0;
  left: 0;
}
.team-member:hover .item-overlay.right {
  right: 0;
  left: 0;
}
.team-member:hover .team-member__description{
  overflow: visible;
}

@media (max-width: 600px){
  .team-member {
    flex-basis: 46% !important;
  }
}
@media (max-width: 400px){
  .team-member {
    flex-basis: 75% !important;
  }
}
@media (max-width: 300px){
  .team-member {
    flex-basis: 100% !important;
  }
}