/* SPDX-License-Identifier: LicenseRef-Proprietary */
/* The layouts that several parts share, on CSS Grid and Flexbox. A part picks one by its class and sets
   --layout-gap where its gap differs. They are in the layer layout of tokens.css, below the stylesheets
   of the parts, so a part can still change any property of them. */
@layer layout {
  /* The space beside the part, so its content lines up with the header and the footer. */
  .container { padding-inline: var(--page-gutter); }
  /* The children in one column. */
  .stack {
    display: grid;
    gap: var(--layout-gap, var(--space-12));
  }
  /* The children in a row that wraps. */
  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--layout-gap, var(--space-12));
  }
  /* Two columns of the same width, or of the widths of --split-first and 1fr. */
  .split {
    --layout-gap: var(--space-48);
    display: grid;
    grid-template-columns: minmax(0, var(--split-first, 1fr)) minmax(0, 1fr);
    align-items: center;
    gap: var(--layout-gap);
  }
}