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

.tf-prose {
  max-width: var(--tf-content-width);
}

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

.tf-section--soft {
  background: var(--tf-paper-soft);
  border-block: var(--tf-rule);
}

.tf-section__head {
  max-width: 44rem;
  margin-bottom: var(--tf-space-4);
}

.tf-grid {
  display: grid;
  gap: var(--tf-space-4);
}

.tf-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.tf-grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.tf-grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

@media (min-width: 900px) {
  .tf-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .tf-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.tf-hr {
  border: none;
  border-top: var(--tf-rule);
  margin: var(--tf-space-5) 0;
}

.tf-hr--heavy {
  border-top: 2px solid var(--tf-ink);
}