/* Six coherent fictional wedding matches from one uniform 3 × 2 contact sheet. */
.demo-gallery figure {
  background-image: url('/static/demo-bridal-gallery-v1.png');
  background-size: 300% 200%;
}

.demo-gallery figure:nth-child(1) { background-position: 0 0; }
.demo-gallery figure:nth-child(2) { background-position: 50% 0; }
.demo-gallery figure:nth-child(3) { background-position: 100% 0; }
.demo-gallery figure:nth-child(4) { background-position: 0 100%; }
.demo-gallery figure:nth-child(5) { background-position: 50% 100%; background-size: 300% 200%; }
.demo-gallery figure:nth-child(6) { background-position: 100% 100%; background-size: 300% 200%; }

.demo-qr {
  width: 190px;
  height: 190px;
  margin-inline: auto;
  padding: 0;
  overflow: hidden;
  background: #fff;
}

.demo-event-art small {
  margin-top: -56px;
  text-align: center;
}

@media (max-width: 760px) {
  .demo-qr { width: 174px; height: 174px; }
  .demo-shell { padding-top: 18px; }
  .demo-stage { margin-top: 24px; }
  .demo-progress button { min-height: 54px; }
  .demo-panel { gap: 18px; padding: 16px; }
  .demo-event-art { min-height: 270px; }
  .demo-panel[data-demo-panel="welcome"] .demo-copy ul { margin-block: 16px 10px; }
  .demo-panel[data-demo-panel="welcome"] .demo-copy button { margin-top: 8px; }
  .demo-closing { margin-top: 24px; padding-top: 20px; }
}

.demo-face {
  position: relative;
  background-color: #eee4f8;
  background-image: url('/static/demo-bridal-gallery-v1.png');
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 300% 200%;
  box-shadow: 0 0 0 8px #ffffffb8, 0 14px 34px #59347d26;
}

.demo-face::after {
  content: "Sample selfie";
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  border-radius: 999px;
  padding: 5px 10px;
  background: #7542b6;
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .06em;
  white-space: nowrap;
}

.demo-qr img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.demo-panel[data-demo-panel="welcome"] .demo-copy h2 {
  background: linear-gradient(90deg, #663cb0, #bd59c9, #d89955);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}