/* Page structure: the width pages sit in, and how things stack and line up. Built on tokens.css. */
.page { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--s5); }
.page--narrow { max-width: 820px; }
.page--medium { max-width: 1000px; }
.page--form { max-width: 480px; }
.page--pad { padding-top: var(--s6); padding-bottom: var(--s8); }
.page--center { text-align: center; }

/* Things one under another, with a gap */
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); align-content: start; }
.stack--s { gap: var(--s2); }
.stack--l { gap: var(--s5); }

/* Things side by side that wrap, with a gap */
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.cluster--s { gap: var(--s2); }
.cluster--end { justify-content: flex-end; }
.cluster--between { justify-content: space-between; }

/* Columns */
.grid { display: grid; gap: var(--s4); }
/* Grid items shrink with the grid rather than pushing it wider than the page */
.grid > * { min-width: 0; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--aside { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }

@media (max-width: 860px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--2, .grid--aside { grid-template-columns: minmax(0, 1fr); }
}