:root {
  --glossary-intro-top: 72px;
  --glossary-intro-bottom: 48px;
  --glossary-title-gap: 24px;
  --glossary-deck-width: 700px;
  --glossary-deck-size: 20px;
  --glossary-margin-width: 240px;
  --glossary-column-gap: 64px;
  --glossary-row-gap: 80px;
  --glossary-chapter-top: 24px;
  --glossary-anchor-offset: 28px;
  --glossary-mobile-gap: 24px;
  --glossary-mobile-intro-top: 40px;
  --glossary-mobile-deck-size: 18px;
}
.glossary-intro {
  padding-top: var(--glossary-intro-top);
  padding-bottom: var(--glossary-intro-bottom);
}
.glossary-intro h1 {
  margin-top: var(--glossary-title-gap);
  margin-bottom: var(--glossary-title-gap);
}
.glossary-deck {
  max-width: var(--glossary-deck-width);
  font-size: var(--glossary-deck-size);
  color: var(--text-muted);
}
.glossary-body {
  padding-top: var(--glossary-chapter-top);
}
.glossary-chapter {
  display: grid;
  grid-template-columns: var(--glossary-margin-width) minmax(0, 1fr);
  column-gap: var(--glossary-column-gap);
  padding-top: var(--glossary-chapter-top);
  scroll-margin-top: var(--glossary-anchor-offset);
}
.glossary-chapter + .glossary-chapter {
  margin-top: var(--glossary-row-gap);
}
.glossary-margin {
  border-top: 1px solid var(--border);
  padding-top: var(--glossary-chapter-top);
}
.glossary-margin h2 {
  margin-top: 0;
  font-size: var(--size-h3);
}
.glossary-margin > p {
  font-size: var(--size-small);
}
.glossary-chapter .term-card {
  scroll-margin-top: var(--glossary-anchor-offset);
}
@media (max-width: 940px) {
  .glossary-chapter {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--glossary-mobile-gap);
  }
}
@media (max-width: 768px) {
  .glossary-intro {
    padding-top: var(--glossary-mobile-intro-top);
  }
  .glossary-deck {
    font-size: var(--glossary-mobile-deck-size);
  }
}