/* Site main: the page between header and footer. Its column is as wide as
   the page asks for (shop_page_width: content for reading and for buying —
   the event page's width, kept by the checkout, the order and the shop's
   other purchases; narrow for a pass — a ticket, a voucher — and a one-step
   form like signing in; the full wrapper otherwise), and its children are
   spaced apart from the space scale. The column is the content's width, the
   gutters come on top, so a page's content is exactly as wide as the event
   page's and the checkout's, which size their own column. */
.site-main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: var(--space-l-xl);
  padding-block: var(--space-l) var(--space-xl-2xl);
}

.site-main[data-width="narrow"] {
  --wrapper-width: calc(var(--column-narrow) + 2 * var(--gutter));
}

.site-main[data-width="content"] {
  --wrapper-width: calc(var(--column-content) + 2 * var(--gutter));
}