/* A single efficient track: only the visible row is painted inside the viewport. */
.person-carousel { position: relative; padding-inline: 20px; }
.person-carousel__viewport { overflow: hidden; contain: paint; }
.person-grid { display: flex; flex-wrap: nowrap; justify-content: flex-start; column-gap: 20px; row-gap: 0; max-width: none; will-change: transform; }
.person-card.trip-card { width: 400px; max-width: 100%; flex: 0 0 400px; }
.person-carousel__intro { margin: 0 auto 30px; max-width: 640px; text-align: center; font-size: 1.08rem; }
.person-carousel__control { position: absolute; top: 50%; z-index: 2; display: grid; width: 38px; height: 38px; place-items: center; border: 3px solid var(--green); border-radius:50%; background: rgb(255 255 255 / .92); color: var(--green); cursor: pointer; transform: translateY(-50%); transition: background .2s, box-shadow .2s, transform .2s; }
.person-carousel__control--previous { left: 0; }
.person-carousel__control--next { right: 0; }
.person-carousel__control span { width: 13px; height: 13px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; }
.person-carousel__control--previous span { transform: rotate(135deg); margin-left: 5px; }
.person-carousel__control--next span { transform: rotate(-45deg); margin-right: 5px; }
.person-carousel__control:hover, .person-carousel__control:focus-visible { background: var(--green); color: #fff; box-shadow: 0 0 0 3px rgb(85 118 20 / .28); }
.person-carousel__control:hover { transform: translateY(-50%) scale(1.06); }
@media (max-width: 1319px) {
  .person-carousel { padding-inline: 0; }
  .person-carousel__viewport { max-width: 820px; margin-inline: auto; }
  .person-carousel__control--previous { left: max(-20px, calc(50% - 468px)); }
  .person-carousel__control--next { right: max(-20px, calc(50% - 468px)); }
}
@media (max-width: 900px) {
  .person-carousel { padding-inline: 20px; }
  .person-carousel__viewport { max-width: 400px; }
  .person-carousel__control--previous { left: max(0px, calc(50% - 258px)); }
  .person-carousel__control--next { right: max(0px, calc(50% - 258px)); }
}
@media (max-width: 500px) { .person-carousel__control { width: 34px; height: 34px; border-width: 2px; } }
@media (max-width: 467px) { .person-carousel__viewport { max-width: none; } .person-card.trip-card { width: 100%; flex-basis: 100%; } }

.person-modal__header {
  height: 42px;
}

.person-modal__header h2 {
  align-self: stretch;
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  line-height: 1;
  transform: translateY(-2px);
}