.portrait-carousel {
  --portrait-side: 106px;
  --portrait-center: 166px;
  --portrait-height: 146px;
  --portrait-center-height: 166px;
  --portrait-gap: 8px;
  --portrait-duration: 650ms;
  position: relative;
  max-width: 650px;
  margin: 35px auto 36px;
}
.portrait-carousel .hero-people { margin: 0 auto; }
.portrait-carousel[data-ready] .hero-people {
  position: relative;
  display: block;
  width: calc(var(--portrait-side) * 4 + var(--portrait-center) + var(--portrait-gap) * 4 + 12px);
  max-width: 100%;
  height: calc(var(--portrait-center-height) + 14px);
  overflow: hidden;
}
.portrait-carousel[data-ready] .portrait {
  --shift: 0px;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--portrait-side);
  height: var(--portrait-height);
  opacity: .4;
  transform: translate(calc(-50% + var(--shift)), -50%);
  transition: transform var(--portrait-duration) cubic-bezier(.22,.68,.25,1),
    width var(--portrait-duration) cubic-bezier(.22,.68,.25,1),
    height var(--portrait-duration) cubic-bezier(.22,.68,.25,1),
    opacity var(--portrait-duration) ease,
    box-shadow var(--portrait-duration) ease;
}
.portrait-carousel[data-ready] .portrait[data-slot="0"] {
  width: var(--portrait-center);
  height: var(--portrait-center-height);
  opacity: 1;
  z-index: 2;
}
.portrait-carousel[data-ready] .portrait[data-slot="-1"] {
  --shift: calc((var(--portrait-center) + var(--portrait-side)) / -2 - var(--portrait-gap));
  opacity: .7;
}
.portrait-carousel[data-ready] .portrait[data-slot="1"] {
  --shift: calc((var(--portrait-center) + var(--portrait-side)) / 2 + var(--portrait-gap));
  opacity: .7;
}
.portrait-carousel[data-ready] .portrait[data-slot="-2"] {
  --shift: calc(var(--portrait-center) / -2 - var(--portrait-side) * 1.5 - var(--portrait-gap) * 2);
}
.portrait-carousel[data-ready] .portrait[data-slot="2"] {
  --shift: calc(var(--portrait-center) / 2 + var(--portrait-side) * 1.5 + var(--portrait-gap) * 2);
}
.portrait-carousel[data-ready] .portrait[data-slot="-3"] {
  --shift: calc(var(--portrait-center) / -2 - var(--portrait-side) * 2.5 - var(--portrait-gap) * 3);
  opacity: 0;
}
.portrait-carousel[data-ready] .portrait[data-slot="3"] {
  --shift: calc(var(--portrait-center) / 2 + var(--portrait-side) * 2.5 + var(--portrait-gap) * 3);
  opacity: 0;
}
.portrait-carousel[data-ready] .portrait > span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 10px 9px;
  background: linear-gradient(transparent, #14131ed9);
  color: white;
  text-align: left;
  font-size: 11px;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 350ms ease, transform 450ms ease;
}
.portrait-carousel[data-ready] .portrait > span strong,
.portrait-carousel[data-ready] .portrait > span small { display: block; white-space: nowrap; }
.portrait-carousel[data-ready] .portrait > span small { font-size: 8px; margin-top: 3px; }
.portrait-carousel[data-ready] .portrait[data-slot="0"] > span { opacity: 1; transform: translateY(0); }
.portrait-toggle {
  position: absolute;
  right: 5px;
  bottom: -24px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #d6d2df;
  border-radius: 50%;
  background: transparent;
  color: #665a7b;
  font-size: 10px;
  line-height: 1;
}
.portrait-toggle:hover:not(:disabled) { color: var(--purple); background: #eee7ff; border-color: #a68bde; }
@media (min-width: 1001px) and (max-height: 800px) {
  .portrait-carousel { --portrait-center-height: 156px; margin-block: 25px 31px; }
}
@media (min-width: 1441px) { .portrait-carousel { margin-block: 42px 41px; } }
@media (min-width: 651px) and (max-width: 750px) {
  .portrait-carousel { --portrait-side: 96px; --portrait-center: 154px; }
}
@media (max-width: 650px) {
  .portrait-carousel {
    --portrait-side: clamp(40px, 13.33vw, 60px);
    --portrait-center: clamp(100px, 29.3vw, 114px);
    --portrait-height: 102px;
    --portrait-center-height: 122px;
    --portrait-gap: 5px;
    width: calc(100% + 30px);
    margin: 26px -15px 31px;
  }
  .portrait-carousel[data-ready] .portrait > span { font-size: 8px; padding: 18px 6px 7px; }
  .portrait-carousel[data-ready] .portrait > span small { font-size: 6px; }
  .portrait-toggle { right: 9px; bottom: -23px; }
}
@media (prefers-reduced-motion: reduce) {
  .portrait-carousel[data-ready] .portrait,
  .portrait-carousel[data-ready] .portrait > span { transition: none; }
}