/* Team page */

.team-profiles-section {
  display: flex;
  flex-direction: column;
  gap: var(--flex-gap-48);
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  max-width: var(--content-max-inset);
  position: relative;
}
.profiles-track {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--flex-gap-48);
  align-items: flex-start;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  width: clamp(28.8rem, 26.8rem + 6.25vw, 38.8rem);
  overflow: hidden;
}
.profile-card.toggle-popup.popup-visible {
  width: clamp(28.8rem, 6.5143rem + 69.6429vw, 60rem);
}
.toggle-popup.popup-visible .more {
  display: none;
}
.toggle-popup.popup-visible .bio-area {
  height: max-content;
  -webkit-mask-image: none;
  mask-image: none;
}
.toggle-popup.popup-visible .masked-area {
  max-height: 100%;
  -webkit-mask-image: none;
  mask-image: none;
}
.masked-area {
  display: flex;
  flex-direction: column;
  gap: var(--flex-gap-8);
  align-items: center;
  flex-shrink: 0;
  max-height: 58rem;
  -webkit-mask-image: linear-gradient(to bottom, white, white, transparent);
  mask-image: linear-gradient(to bottom, white, white, transparent);
}
.profile-card .avatar-area {
  display: flex;
  flex-direction: column;
  gap: var(--gap-16);
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  flex-shrink: 0;
}
.profile-portrait {
  flex-shrink: 0;
  width: 22.6rem;
  height: 22.6rem;
  position: relative;
  overflow: visible;
}
.info {
  display: flex;
  flex-direction: column;
  gap: var(--flex-gap-2);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.name {
  text-align: center;
  font-size: var(--text-card-title);
  font-weight: var(--text-weight-700);
  position: relative;
}
.role {
  text-align: center;
  font-size: var(--text-card-role);
  font-weight: var(--text-weight-400);
  position: relative;
}
.bio-area {
  display: flex;
  flex-direction: column;
  gap: var(--flex-gap-8);
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  text-align: left;
  font-size: var(--text-card-bio);
  font-weight: var(--text-weight-500);
}
.bio-area .list-cards,
.bio-area .bio {
  align-self: stretch;
}
.bio-area .list-cards li {
  margin: var(--min-flex-gap-16);
}
.bio-area .list-cards ul {
  margin-left: var(--min-flex-gap-16);
  margin-right: var(--min-flex-gap-8);
  margin-top: var(--min-flex-gap-8);
  margin-bottom: var(--min-flex-gap-8);
}
.more {
  position: absolute;
  bottom: 0;
  transform: translateY(-0.4rem);
  padding-bottom: var(--gap-16);
  font-size: var(--text-slider-item);
  font-weight: var(--text-weight-800);
  text-decoration-line: underline;
}