.princess-reveal {
  --photo-reveal: 50%;
  width: min(calc(100% - 64px), 1200px);
  margin-inline: auto;
  padding-block: clamp(40px, 6vw, 88px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 6vw, 88px);
}
.princess-reveal-figure { margin: 0; min-width: 0; }
.princess-reveal-images { position: relative; aspect-ratio: 353 / 448; border-radius: 26px; overflow: hidden; background: #241a34; isolation: isolate; }
.princess-reveal-images img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.princess-reveal-before { clip-path: inset(0 calc(100% - var(--photo-reveal)) 0 0); }
.princess-reveal-divider { position: absolute; inset-block: 0; left: clamp(2px, var(--photo-reveal), calc(100% - 2px)); width: 2px; background: #fff; transform: translateX(-50%); pointer-events: none; }
.princess-reveal-divider span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 52px; height: 52px; border: 2px solid white; border-radius: 50%; background: #785294; color: white; font: 30px Georgia, serif; white-space: pre; }
.princess-reveal-images .princess-reveal-range { position: absolute; inset: 0; margin: 0; padding: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.princess-reveal-images:focus-within { outline: 3px solid #d7b8ff; outline-offset: 5px; }
.princess-reveal-figure figcaption { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; color: #cbc2d9; font-size: .85rem; }
.princess-reveal-figure figcaption span:last-child { text-align: right; }
.princess-reveal-copy { min-width: 0; }
.princess-reveal-copy h2 { margin: 0 0 24px; font-family: "Playfair Display", Georgia, serif; font-size: clamp(2.25rem, 4.4vw, 4rem); line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
.princess-reveal-copy > p:not(.eyebrow) { color: #c4bdd0; line-height: 1.75; }
.princess-reveal-copy .princess-reveal-hint { margin-block: 24px; color: #dcc6f5; font-size: .9rem; }
.princess-reveal-copy .button { max-width: 100%; white-space: normal; text-align: center; }
.princess-reveal-copy .princess-reveal-note { margin-top: 16px; font-size: .75rem; }
@media (max-width: 760px) {
  .princess-reveal { width: min(calc(100% - 36px), 540px); grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .princess-reveal-copy { text-align: center; }
  .princess-reveal-copy h2 { font-size: clamp(2.1rem, 8vw, 3.2rem); }
  .princess-reveal-copy .eyebrow { font-size: .7rem; }
}