.section-page,
.additional-page-section {
  padding-bottom: var(--gap-xl);

  &:has(+ .additional-page-section) {
    padding-bottom: var(--gap);
  }
}

.page {
  padding-top: var(--gap-xl);
  display: flex;
  flex-direction: column;
  gap: var(--gap-l);

  .page-header {
    display: flex;
    flex-direction: column;
    gap: var(--gap);

    & > span {
      padding-top: var(--gap-xs);
      color: var(--ink);
    }

    h1 {
      font-size: var(--font-48);
    }
  }

  .page-content {
    h2, h3 {
      padding-top: var(--gap-l);
      padding-bottom: var(--gap);
    }

    h2 {
      font-size: var(--font-28);
    }

    h3 {
      font-size: var(--font-20);
    }

    p, ul {
      line-height: var(--line-height--tall);
      color: var(--ink);

      &:not(:last-of-type) {
        padding-bottom: var(--gap);
      }
    }
  }
}