.persons {
  --person-margin-bottom: 2rem;
  --tabs-margin-bottom: 3rem;
  --name-gap: .5rem;
  --bio-gap: .5rem;
}

.persons-group {
  grid-template-columns: repeat(12, [col-start] 1fr);
  gap: var(--layout-column-gap);
  margin-bottom: calc(var(--person-margin-bottom) * -1);
  display: none;
}
.persons-group.active {
  display: grid;
}




/* PERSON */

.persons-person {
  grid-column-end: span calc(12 / var(--num-columns));
  margin-bottom: var(--person-margin-bottom);
  cursor: pointer;
}
@media (max-width: 1280px) {
  .persons-person {
    grid-column-end: span calc(12 / 3);
  }
}
@media (max-width: 1024px) {
  .persons-person {
    grid-column-end: span calc(12 / 2);
  }
}
@media (max-width: 640px) {
  .persons-person {
    grid-column-end: span calc(12 / 1);
  }
}


.persons-person
.persons-person-portrait {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  margin-bottom: var(--name-gap);
}
.persons-person-position {
  margin-top: .25rem;
  font-size: var(--font-size-regular);
  line-height: var(--line-height-regular);
}
.persons-person-toggle {
  display: flex;
  align-items: center;
}
.persons-person-toggle .arrow {
  transition: transform var(--regular-transition-duration) ease-in-out;
}
.persons-person.active .persons-person-toggle .arrow {
  transform: rotate(90deg);
}

.persons-person-bio {
  border-top: var(--regular-border-width) solid var(--regular-border-color);
  padding-top: var(--bio-gap);
  margin-top: var(--bio-gap);
}

.persons-person-bio-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.persons-person-bio-text {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--regular-transition-duration) ease-in-out;
  font-size: var(--font-size-regular);
  line-height: var(--line-height-regular);
  margin-top: var(--bio-gap);
}
.persons-person.active .persons-person-bio-text {
  grid-template-rows: 1fr;
}
.persons-person-bio-text-inner {
  overflow: hidden;
}



/* TABS */

ul.persons-groups-tabs {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  gap: 2rem;
  justify-content: center;
  margin-bottom: var(--tabs-margin-bottom);
}

.persons-groups-button {
  text-transform: uppercase;
  cursor: pointer;
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
}
.persons-groups-button.active {
  text-decoration: underline;
  text-underline-offset: var(--text-underline-offset);
  text-decoration-thickness: var(--text-decoration-thickness);
}
@media (hover: hover) {
  .persons-groups-button:hover {
    text-decoration: underline;
    text-underline-offset: var(--text-underline-offset);
    text-decoration-thickness: var(--text-decoration-thickness);
  }
}