.shell {
  width: min(100%, calc(var(--shell) + (2 * var(--gutter))));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--space-8);
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.section--compact { padding-block: var(--space-7); }
.section--spacious { padding-block: var(--space-9); }
.section--paper { background: var(--color-background); }
.section--surface { background: var(--color-surface); }
.section--ink { background: var(--color-foreground); color: var(--color-surface); }
.section--primary { background: var(--color-primary); color: var(--color-on-primary); }
.section--secondary { background: var(--color-secondary); color: var(--color-on-secondary); }

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.stack--small { gap: var(--space-2); }
.stack--large { gap: var(--space-6); }
.stack--xl { gap: var(--space-8); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.cluster--between { justify-content: space-between; }
.cluster--end { justify-content: flex-end; }

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}

.grid > * { min-width: 0; }
.grid__full { grid-column: 1 / -1; }

.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-5);
}

.content-grid {
  display: grid;
  gap: var(--space-6);
}

.flow > * + * { margin-top: var(--flow-space, var(--space-4)); }

.measure { max-width: var(--measure); }
.measure--narrow { max-width: var(--measure-narrow); }

.section-heading {
  display: grid;
  gap: var(--space-3);
  max-width: var(--measure);
  margin-bottom: var(--space-7);
}

.section-heading > p:last-child {
  color: currentColor;
  font-size: var(--step-1);
}

.media {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--color-surface-strong);
}

.media--wide { aspect-ratio: 16 / 9; }
.media--portrait { aspect-ratio: 3 / 4; }

@media (min-width: 48rem) {
  .section { padding-block: var(--space-9); }
  .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .content-grid--halves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .content-grid--sidebar { grid-template-columns: minmax(0, 2fr) minmax(16rem, 0.8fr); }
  .content-grid--sidebar > aside { align-self: start; }
}