/* The design cards show the actual example website, in its current language. */
.home-refined .design-preview.basis-website-preview {
  display: block;
  position: relative;
  height: var(--website-preview-height, 290px);
  min-height: 0;
  aspect-ratio: auto;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  text-align: left;
}
.basis-website-preview iframe {
  position: absolute;
  inset: 0 auto auto 0;
  display: block;
  width: 1080px;
  height: 640px;
  max-width: none;
  border: 0;
  pointer-events: none;
  transform: scale(var(--website-preview-scale, .35));
  transform-origin: top left;
}
.basis-website-preview .website-preview-label {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  box-sizing: border-box;
  height: 44px;
  border-top: 1px solid var(--basis-line);
  background: var(--basis-paper);
  color: var(--basis-ink);
  font-size: 12px;
  line-height: 1.5;
}
.basis-website-open { position: absolute; inset: 0; z-index: 1; color: inherit; text-decoration: none; }
.basis-website-open:hover .website-preview-label,
.basis-website-open:focus-visible .website-preview-label { text-decoration: underline; text-underline-offset: 4px; }
.basis-website-preview:focus-within { outline: 2px solid var(--basis-ink); outline-offset: 5px; }
.home-refined .six-basis-designs .design-meta { flex-wrap: wrap; }
.home-refined .six-basis-designs .design-meta > div { flex: 1; min-width: 0; }
.home-refined .six-basis-designs .design-place { flex-basis: 100%; margin: 0; }

/* Only the embedded overview omits the demo controls around the wedding site. */
html.basis-embedded-preview { scrollbar-width: none; }
html.basis-embedded-preview::-webkit-scrollbar { display: none; }
.basis-embedded-preview .demo-bar,
.basis-embedded-preview .example-view-switch,
.basis-embedded-preview .example-share-panel,
.basis-embedded-preview footer { display: none !important; }
.basis-embedded-preview .hero { min-height: 520px; padding-block: 35px; }
.basis-embedded-preview #main > :not(.hero) { display: none !important; }
.basis-embedded-preview .hero-art .basis-date-card--tuscany,
.basis-embedded-preview .hero-art .basis-date-card--elegance { max-width: 280px; }

@media (max-width: 720px) {
  .home-refined .design-preview.basis-website-preview { height: var(--website-preview-height, 290px); aspect-ratio: auto; }
  .basis-website-preview .website-preview-label { font-size: 12px; padding: 12px 14px; }
}