.team-list {
  grid-column: 3 / span 10;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  column-gap: var(--s-md);
}

.team-item-img-wrapper {
  aspect-ratio: 7/4;
  background-color: grey;
  margin-top: 1em;
}

.team-item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  margin-bottom: var(--s-md);
}

.team-item:last-child,
.team-item:nth-last-child(2):nth-child(odd) {
  margin-bottom: 0;
}

.team-item-header {
  border-style: solid;
  border-width: 4px 0px 0px 4px;
  border-color: var(--red);
  padding: 1em;
  display: flex;
  flex-direction: column;
}

.team-item.swap-color .team-item-header {
  border-color: var(--blue);
}

.team-item-headline {
  margin: 0;
}

.team-item-short-description {
  margin-top: 1em;
}

.team-item-long-description {
  background-color: var(--red);
  color: var(--white);
  padding: 1.5em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5em;
}

.team-item-long-description::before {
  content: "";
  background-color: var(--white);
  opacity: 0.65;
  mask-image: url("../../img/quotation-mark.svg");
  mask-repeat: no-repeat;
  mask-size: contain;
  height: 1.5em;
  aspect-ratio: 94/75;
}

.team-item-long-description-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.team-item-long-description p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.team-item.more-wrapper .team-item-long-description p {
  line-clamp: 3;
  -webkit-line-clamp: 3;
  height: calc(1em * 1.25 * 3);
}

.team-item.more-wrapper .team-item-long-description.show-more p {
  height: auto;
  line-clamp: unset;
  -webkit-line-clamp: unset;
}

.team-item-long-description.show-more .more-btn {
  display: none;
}

.team-item-btn {
  margin-top: 1em;
}

.team-description {
  grid-column: 3 / span 10;
  text-align: center;
  margin-bottom: var(--s-md);
}

.team-headline {
  grid-column: 3 / span 10;
  text-align: center;
}

@media (max-width: 1199.98px) {
  .team-list {
    grid-column: 2 / span 12;
  }
}

@media (max-width: 767.98px) {
  .team-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {}