/* Grid core */
.u__flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--grid__gap, var(--spaceM));
  width: 100%;
}

.u__grid {
  display: grid;
  container-type: inline-size;
  gap: var(--grid__gap, var(--spaceM));
  grid-template-columns: repeat(var(--cols, auto-fit), minmax(min(100%, var(--colMin, 20rem)), 1fr));
  align-items: start;
  width: 100%;
}

/* Fixed column counts */

.u__grid__1 {
  --cols: 1;
}

.u__grid__2 {
  --cols: 2;

  @media (max-width: 600px) {
    --cols: 1;
  }
}

.u__grid__3 {
  --cols: 3;

  @container (max-width: 80rem) {
    --cols: 2;
  }

  @container (max-width: 40rem) {
    --cols: 1;
  }
}

.u__grid__4 {
  --cols: 4;

  @container (max-width: 90rem) {
    --cols: 3;
  }

  @container (max-width: 80rem) {
    --cols: 2;
  }

  @container (max-width: 40rem) {
    --cols: 1;
  }
}

.u__grid__5 {
  --cols: 5;

  @container (max-width: 90rem) {
    --cols: 4;
  }

  @container (max-width: 80rem) {
    --cols: 3;
  }

  @container (max-width: 40rem) {
    --cols: 2;
  }
}

/* Asymmetric grid
   Override --col1/--col2/--col3 to adjust proportions.
   Default: 2fr 1fr 1fr */

.u__grid__asym {
  grid-template-columns: var(--col1, 3fr) var(--col2, 2fr) var(--col3, 1fr);

  @media (max-width: 800px) {
    grid-template-columns: var(--col1, 2fr) var(--col2, 2fr) var(--col3, 2fr);
  }

  @media (max-width: 600px) {
    grid-template-columns: 1fr;
  }
}

/* Gaps */

.u__gap--none {
  --grid__gap: 0;
}

.u__gap--xs {
  --grid__gap: var(--spaceXs);
}

.u__gap--s {
  --grid__gap: var(--spaceS);
}

.u__gap--m {
  --grid__gap: var(--spaceM);
}

.u__gap--l {
  --grid__gap: var(--spaceL);
}

.u__column_rule {
  column-rule: 1px solid #666666;
}

/* TinyMCE-authored page content (.entry-content) gets the bronze gutter
   instead of the default footer gray. */
.entry-content .u__column_rule {
  column-rule: 1px solid var(--colorBronze);
}

/* Two-column WYSIWYG blocks in page content: wider gap, no trailing
   paragraph margin inside the columns. */
.entry-content .u__grid.u__grid__2 {
  --grid__gap: var(--spaceL);
}

.entry-content .u__grid.u__grid__2 > * {
  margin-bottom: 0;
}