.text-document {
  margin: 0 auto;
  max-width: 760px;
  overflow-wrap: anywhere;
  padding: 64px 0 96px;
  width: calc(100% - 40px);
}

.text-document > h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 24px;
}

.text-document-introduction {
  font-size: 21px;
  line-height: 1.6;
  margin-bottom: 40px;
  white-space: pre-line;
}

.text-document-body { font-size: 18px; line-height: 1.8; }
.text-document-body > :first-child { margin-top: 0; }
.text-document-body > :last-child { margin-bottom: 0; }
.text-document-body :is(h1, h2, h3, h4, h5, h6) {
  font-weight: 700;
  line-height: 1.3;
  margin: 2em 0 .75em;
  scroll-margin-top: 130px;
}
.text-document-body :is(h1, h2) { font-size: 28px; }
.text-document-body h3 { font-size: 23px; }
.text-document-body :is(h4, h5, h6) { font-size: 20px; }
.text-document-body :is(p, ul, ol, blockquote, table) { margin-bottom: 1.25em; }
.text-document-body :is(ul, ol) { padding-left: 1.5em; }
.text-document-body li + li { margin-top: .5em; }
.text-document-body li > :is(ul, ol) { margin-top: .5em; margin-bottom: 0; }
.text-document-body a { text-decoration: underline; text-underline-offset: 3px; }
.text-document-body a:hover { color: var(--orange); }
.text-document-body blockquote {
  background: var(--orange-light);
  border-left: 4px solid var(--orange);
  padding: 20px 24px;
}
.text-document-body blockquote > :last-child { margin-bottom: 0; }
.text-document-body img { height: auto; max-width: 100%; }
.text-document-body table { display: block; max-width: 100%; overflow-x: auto; }
.text-document-body :is(th, td) { border: 1px solid var(--green-light); padding: 12px 16px; }
.text-document-body th { background: var(--green-light); }

@media (min-width: 992px) {
  .text-document { padding-bottom: 236px; }
}

@media (max-width: 767.98px) {
  .text-document { padding: 40px 0 56px; }
  .text-document-introduction { font-size: 19px; margin-bottom: 32px; }
  .text-document-body :is(h1, h2) { font-size: 25px; }
}