/* A transparent portrait meets the linen section at one fixed baseline. */
.invitation {
  position: relative;
  overflow: clip;
}
.portrait-transition {
  --portrait-scale: 1;
  --portrait-lean: 0deg;
  --portrait-shift: 0px;
  position: relative;
  height: clamp(360px, 38vw, 540px);
  max-width: 1260px;
  margin: 44px auto 0;
  overflow: hidden;
}
.transition-portrait {
  position: absolute;
  height: 100%;
  aspect-ratio: 2 / 3;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%);
}
.transition-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 100%;
  transform: translateX(var(--portrait-shift)) rotate(var(--portrait-lean)) scale(var(--portrait-scale));
  will-change: transform;
}
@media (max-width: 800px) {
  .portrait-transition {
    height: 420px;
    margin-top: 35px;
  }
}
@media (max-width: 520px) {
  .portrait-transition {
    height: clamp(340px, 97vw, 400px);
    margin-top: 30px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .transition-portrait img {
    transform: none;
    will-change: auto;
  }
}