.container {
  margin-inline: auto;
  max-width: var(--container);
  padding-inline: var(--page-padding);
  width: 100%;
}

.container--text {
  margin-inline: auto;
  max-width: calc(var(--measure) + (2 * var(--page-padding)));
}

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

.section {
  padding-block: var(--section-space);
}

.content-list {
  border-top: 1px solid var(--line);
  margin-top: 3rem;
}

.content-list__item {
  border-bottom: 1px solid var(--line);
  padding-block: 2rem;
}

.type-hero {
  font-size: var(--type-hero-size);
  font-weight: var(--type-hero-weight);
  letter-spacing: -0.036em;
  line-height: var(--type-hero-leading);
}

.type-display {
  font-size: var(--type-display-size);
  font-weight: var(--type-display-weight);
  letter-spacing: -0.036em;
  line-height: var(--type-display-leading);
}

.type-h1 {
  font-size: var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  letter-spacing: -0.033em;
  line-height: var(--type-h1-leading);
}

.type-h2 {
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  letter-spacing: -0.025em;
  line-height: var(--type-h2-leading);
}

.lede {
  font-size: var(--type-lede-size);
  font-weight: var(--type-lede-weight);
  line-height: var(--type-lede-leading);
}

.meta {
  color: var(--mute);
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
  font-variant-numeric: tabular-nums;
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-leading);
}

@media (max-width: 47.99rem) {
  .grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .section {
    padding-block: clamp(4rem, 16vw, 6rem);
  }
}