/* Decorations flow with the invitation, behind the content and never intercept taps. */
.invitation-content--decorated { isolation: isolate; }
.invitation-content--decorated > :not(.invitation-backdrop) { position: relative; z-index: 1; }
.invitation-backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: var(--decoration-opacity); }
.invitation-backdrop span { position: absolute; width: min(var(--decoration-size), 32vw); top: 50px; bottom: 0; background-image: var(--decoration-image); background-size: 100% auto; background-repeat: repeat-y; }
.invitation-backdrop span:first-child { left: -2%; }
.invitation-backdrop span:nth-child(2) { right: -2%; transform: scaleX(-1); background-position: 0 280px; }
.invitation-backdrop span:nth-child(n+3) { display: none; }
.invitation-backdrop--corners span { height: var(--decoration-size); max-height: 32vw; bottom: auto; background-repeat: no-repeat; }
.invitation-backdrop--corners span:nth-child(2) { background-position: 0 0; }
.invitation-backdrop--corners span:nth-child(3) { display: block; left: -2%; top: auto; bottom: 24px; transform: scaleY(-1); }
.invitation-backdrop--corners span:nth-child(4) { display: block; right: -2%; top: auto; bottom: 24px; transform: scale(-1); }
.invitation-backdrop--scattered span:first-child { left: 3%; }
.invitation-backdrop--scattered span:nth-child(2) { right: 3%; background-position: 0 420px; }
.invitation-backdrop--scattered span:nth-child(3) { display: block; left: 40%; top: 300px; opacity: .5; }
@media (max-width: 640px) { .invitation-backdrop { opacity: calc(var(--decoration-opacity) * .8); } }