.portrait-carousel {
  position: relative;
  height: 410px;
  overflow: hidden;
  background: #e9e9e4;
  touch-action: pan-y;
  user-select: none;
}
.portrait-carousel [data-portrait-slide] { width: 100%; height: 100%; }
.portrait-carousel [hidden] { display: none; }
.portrait-carousel [data-portrait-slide] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--portrait-position, 50% 50%);
  opacity: 1;
  filter: none;
}
.portrait-controls {
  position: absolute;
  inset: auto 0 0;
  height: 64px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 40px 10px;
  background: transparent;
}
.portrait-dots { display: flex; gap: 0; }
.portrait-dots button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 32px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.portrait-dots button::before {
  content: '';
  width: 6px;
  height: 6px;
  border: 1px solid white;
  border-radius: 50%;
  background: rgb(255 255 255 / 25%);
  box-shadow: 0 1px 3px rgb(0 0 0 / 25%);
}
.portrait-dots button[aria-current]::before { background: white; }
.portrait-rotation {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / 25%);
  color: white;
  font-size: 13px;
  cursor: pointer;
}
.portrait-carousel:focus-visible,
.portrait-carousel button:focus-visible { outline: 2px solid white; outline-offset: -4px; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.about-block {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  grid-template-areas: "intro copy" "portrait copy";
  grid-template-rows: auto 1fr;
  column-gap: clamp(36px, 6vw, 80px);
  row-gap: 26px;
  align-items: start;
}
.about-intro { grid-area: intro; }
.about-block h2 { max-width: 15ch; font-size: clamp(32px, 3.3vw, 44px); }
.about-copy { grid-area: copy; padding-top: 33px; max-width: none; }
.about-portrait {
  grid-area: portrait;
  width: 100%;
  max-width: 440px;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  margin: 0;
}
.about-carousel.portrait-carousel { height: auto; }
@media (min-width: 1101px) {
  .portrait-block { max-width: 462px; }
  .portrait-block .portrait-carousel { height: auto; aspect-ratio: 392 / 410; }
}
@media (min-width: 1000px) { .about-copy p { font-size: 16px; } }
@media (max-width: 1100px) { .portrait-carousel { height: 370px; } }
@media (max-width: 760px) { .portrait-carousel { height: 290px; } }
@media (max-width: 900px) {
  .about-block { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "portrait" "copy"; grid-template-rows: auto; row-gap: 24px; }
  .about-block h2 { font-size: clamp(32px, 5vw, 39px); max-width: none; }
  .about-heading-ending { display: block; white-space: nowrap; }
  .about-copy { padding-top: 0; }
  .about-portrait { max-width: none; }
  .about-carousel.portrait-carousel { height: auto; aspect-ratio: 1; }
}
@media (max-width: 560px) {
  .portrait-carousel { height: 330px; }
  .about-block h2 { font-size: clamp(30px, 10vw, 39px); }
}