.portrait-exhibition {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: center;
  gap: clamp(24px, 6vw, 100px);
  padding: clamp(25px, 5vw, 60px) 0;
}
.portrait-intro h1 {
  font-size: clamp(3rem, 6.8vw, 6.3rem);
}
.portrait-intro .eyebrow {
  margin-top: 0;
}
.portrait-byline {
  margin: 18px 0 30px;
  font-size: .9rem;
  color: var(--green);
}
.portrait-description {
  font-size: clamp(1rem, 2vw, 1.18rem);
  max-width: 29ch;
}
#portrait-instructions {
  font-size: .86rem;
  color: var(--muted);
  max-width: 32ch;
}
.portrait-figure {
  width: min(100%, 500px, 56vh);
  margin: 0 auto;
}
.portrait-frame {
  padding: clamp(6px, 1vw, 12px);
  background: white;
  border: 1px solid var(--line);
}
#portrait {
  height: auto;
  aspect-ratio: 15 / 19;
  cursor: ew-resize;
  touch-action: pan-y;
}
.portrait-controls {
  display: grid;
  grid-template-columns: auto 1fr 4ch;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  font: 600 .75rem/1.4 ui-monospace, monospace;
}
.portrait-controls input {
  width: 100%;
  margin: 0;
  accent-color: var(--green);
}
.portrait-controls output {
  text-align: right;
}
@media (max-width: 680px) {
  .portrait-exhibition {
    grid-template-columns: minmax(0, 1fr);
  }
  .portrait-figure {
    width: min(100%, 440px);
  }
  .portrait-byline {
    margin: 12px 0 16px;
  }
}