.font-bold {
  font-weight: var(--font-bold);
}

.font-mono {
  font-family: var(--font-mono);
}

.font-sans {
  font-family: var(--font-sans);
}

.font-serif {
  font-family: var(--font-serif);
}

p {
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 200;
}

li {
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 200;
  margin-bottom: var(--spacing-4);
}

figcaption {
  margin-top: var(--spacing-2);
  color: var(--color-gray-700);
  font-size: var(--text-sm);
  font-weight: 200;
}

.column[style*="--span:12"] figcaption {
  padding-left: var(--spacing-4);
}

/*
  Mobile
  ========================================================================== */
@media screen and (max-width: 45em) {
  p {
    font-size: var(--text-sm);
  }
  figcaption {
    font-size: var(--text-xs);
  }
}