/*
 * Two-column page layout (PageView/Pages/TwoColumn.html, backend layout "twoColumn").
 * Left: main content / form column (813fr). Right: side panel / summary column (563fr).
 * At full-hd (1920px): 813px + 64px gap + 563px = 1440px content width exactly.
 * Below desktop (992px): single column (form first, summary below).
 */
/*Returns a CSS clamp function which resolves to $size-at-min-width when page width is
below $min-width,
$size-at-max-width when page width is above $max-width,
and linearly scales between the two between $min-width and $max-width*/
@layer templates {
  .twoColumn {
    display: grid;
    gap: var(--gap-xxl);
  }
  @media (min-width: 992px) {
    .twoColumn {
      grid-template-columns: minmax(0, 813fr) minmax(0, 563fr);
      align-items: start;
    }
  }
  .twoColumn__side,
  .twoColumn__side > .frame {
    display: contents;
  }
  .twoColumn__side > .frame > :not(header) {
    order: -1;
  }
  .twoColumn__side > .frame > header {
    order: -2;
  }
  @media (min-width: 992px) {
    .twoColumn__side > .frame > header {
      grid-column: 1;
      grid-row: 1;
    }
  }
  .twoColumn__side > .frame > header > * {
    margin-bottom: 0;
  }
  @media (min-width: 992px) {
    .twoColumn__main {
      grid-column: 1;
      grid-row: 2;
    }
    .twoColumn__side > .frame > :not(header) {
      grid-column: 2;
      grid-row: 2;
    }
  }
}