.styleguide {
  --region-space-top: var(--space-xl-2xl);
  --spot-color: color-mix(in oklab, var(--color-bg) 97%, var(--color-text));
}

.styleguide code {
  font-size: var(--size-step-min-2);
}

.styleguide section {
  --region-space-bottom: var(--space-l-xl);
  --region-space-top: var(--space-l-xl);
}

.styleguide :is(h2, h3) {
  font-size: var(--size-step-0);
  font-family: var(--font-base);
  text-transform: uppercase;
}

.styleguide h2 {
  letter-spacing: var(--tracking-wide);
}

.styleguide .colors {
  --cluster-vertical-alignment: flex-start;
}

.styleguide .colors ul {
  --min: 10ch;
  --gap: var(--space-s-m);

  display: grid;
  grid-gap: var(--gap);
  /* min() with 100% prevents overflow
		in extra narrow spaces */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
}

.styleguide .colors li {
  display: grid;
  gap: var(--space-xs);
  grid-row: span 2;
  grid-template-rows: subgrid;
}

.styleguide .colors li div {
  max-inline-size: var(--max-img-width, 100%);
  block-size: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: center;
  border: 1px solid var(--color-text);
}

.styleguide .space {
  background-color: var(--color-text);
  display: block;
}

.styleguide .tabs {
  align-items: center;
  border-block-end: 1px solid #d1d8e0;
  display: flex;
  gap: var(--space-xs);
  margin-block-end: var(--space-s);
  padding-block-end: var(--space-s);
}