:where([data-bridal-grid]) {
  --bridal-columns: 2;
  --bridal-gap: 24px;
  display: grid;
  grid-template-columns: repeat(var(--bridal-columns), minmax(0, 1fr));
  align-items: start;
  gap: var(--bridal-gap);
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
}

[data-grid-columns="1"] { --bridal-columns: 1; }
[data-grid-columns="3"] { --bridal-columns: 3; }
[data-grid-columns="4"] { --bridal-columns: 4; }
[data-grid-gap="tight"] { --bridal-gap: 12px; }
[data-grid-gap="airy"] { --bridal-gap: 40px; }
:where([data-grid-background="paper"]) { background: #fbfaf7; }
:where([data-grid-background="sand"]) { background: #efe9df; }

:where([data-bridal-cell]) {
  --bridal-span: 1;
  grid-column: span min(var(--bridal-span), var(--bridal-columns));
  min-width: 0;
  overflow-wrap: anywhere;
}

[data-span="2"] { --bridal-span: 2; }
[data-span="3"] { --bridal-span: 3; }
[data-span="4"] { --bridal-span: 4; }

:where([data-bridal-cell] video, [data-bridal-cell] iframe) {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

:where([data-bridal-cell] h2) {
  font: 400 clamp(26px, 3vw, 42px)/1.12 "Bodoni Moda", Georgia, serif;
}

:where([data-bridal-cell] p) {
  font: 400 16px/1.55 Jost, sans-serif;
}

@media (max-width: 650px) {
  :where([data-bridal-grid][data-grid-columns]) {
    grid-template-columns: minmax(0, 1fr);
  }
  :where([data-bridal-cell]) { grid-column: auto; }
}

:where([data-page-composition]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

:where([data-page-flow], [data-page-layer]) {
  grid-area: 1 / 1;
  min-width: 0;
}

:where([data-page-flow]) { display: flow-root; }

:where([data-page-layer]) {
  display: grid;
  grid-template-columns: repeat(48, minmax(0, 1fr));
  grid-auto-rows: 20px;
  align-content: start;
  align-items: start;
  pointer-events: none;
}

:where([data-page-item]) {
  position: relative;
  grid-column: var(--page-column, 1) / span var(--page-span, 1);
  grid-row: var(--page-row, 1) / span var(--page-rows, 1);
  min-width: 0;
  min-height: calc(var(--page-frame, 0) * 20px);
  overflow-wrap: anywhere;
  pointer-events: auto;
}

:where([data-page-resized] > img, [data-page-resized] > figure img) {
  width: 100%;
  max-width: 100%;
  max-height: none;
}

@media (max-width: 650px) {
  :where(body:not(.page-grid-desktop) [data-page-composition]) {
    display: block;
    position: relative;
    min-height: calc(var(--page-mobile-end, 0) * 20px);
  }
  :where(body:not(.page-grid-desktop) [data-page-anchor]) { display: none !important; }
  :where(body:not(.page-grid-desktop) [data-page-layer]) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding-inline: 6%;
  }
  :where(body:not(.page-grid-desktop) [data-page-item]) {
    order: calc(var(--page-row, 1) * 48 + var(--page-column, 1));
    min-height: calc(var(--page-mobile-frame, 0) * 20px);
  }
  :where(body:not(.page-grid-desktop) [data-page-mobile]) {
    position: absolute;
    top: calc((var(--page-mobile-row) - 1) * 20px);
    left: calc((var(--page-mobile-column) - 1) * 100% / 48);
    width: calc(var(--page-mobile-span) * 100% / 48);
  }
  :where(body:not(.page-grid-desktop) [data-page-mobile-resized] > img,
         body:not(.page-grid-desktop) [data-page-mobile-resized] > figure img) {
    width: 100%;
    max-width: 100%;
    max-height: none;
  }
}

/* Artwork should remain centered inside its assigned cell at every viewport width. */
:where([data-page-composition]:has(> [data-page-flow] > .bureau-cover:only-child [data-page-anchor])
  > [data-page-layer] > [data-page-item]) > img {
  display: block;
  margin-inline: auto;
}

@media (max-width: 650px) {
  /* Restore the cover composition after its artwork was placed on the desktop grid. */
  :where(body:not(.page-grid-desktop) [data-page-composition]:has(> [data-page-flow] > .bureau-cover:only-child [data-page-anchor])) {
    display: grid;
  }
  :where(body:not(.page-grid-desktop) [data-page-composition]:has(> [data-page-flow] > .bureau-cover:only-child [data-page-anchor]) > [data-page-layer]) {
    justify-content: center;
    align-items: center;
    padding: 32px 9%;
  }
  :where(body:not(.page-grid-desktop) [data-page-composition]:has(> [data-page-flow] > .bureau-cover:only-child [data-page-anchor]) > [data-page-layer] > [data-page-item]:not([data-page-mobile])) {
    width: clamp(0px, calc(var(--page-span, 48) * 100% / 48), 100%);
    text-align: center;
  }
  :where(body:not(.page-grid-desktop) [data-page-item] img) {
    display: block;
    max-width: 100%;
    margin-inline: auto;
  }
}