.article {
  line-height: var(--theme-lineHeights-base);
  font-family: var(--theme-fonts-body);
  color: var(--theme-colors-gray-800);

  & h1 {
    font-family: var(--theme-fonts-heading);
    font-weight: var(--theme-fontWeights-bold);
    font-size: var(--theme-fontSizes-3xl);
    margin: 0.5rem 0;
  }

  & h2 {
    font-family: var(--theme-fonts-heading);
    font-weight: var(--theme-fontWeights-bold);
    font-size: var(--theme-fontSizes-2xl);
    margin: 0.75rem 0;
  }

  & h3 {
    font-family: var(--theme-fonts-heading);
    font-weight: var(--theme-fontWeights-bold);
    font-size: var(--theme-fontSizes-xl);
    margin: 1rem 0;
  }

  & h4 {
    font-family: var(--theme-fonts-heading);
    font-weight: var(--theme-fontWeights-bold);
    font-size: var(--theme-fontSizes-lg);
    margin: 1.25rem 0;
  }

  & h5 {
    font-family: var(--theme-fonts-heading);
    font-weight: var(--theme-fontWeights-bold);
    font-size: var(--theme-fontSizes-md);
    margin: 1.75rem 0;
  }

  & h6 {
    font-family: var(--theme-fonts-heading);
    font-weight: var(--theme-fontWeights-bold);
    font-size: var(--theme-fontSizes-sm);
    margin: 2rem 0;
  }

  & p {
    font-family: var(--theme-fonts-body);
    font-weight: var(--theme-fontWeights-normal);
    font-size: var(--theme-fontSizes-md);
    margin: 0 0 1rem 0;
  }

  & a {
    cursor: pointer;
    outline: none;
    color: var(--theme-colors-gray-800);
    border-bottom: 1px solid var(--theme-colors-gray-800);

    &:focus {
      box-shadow: var(--theme-shadows-outline);
    }
  }

  & hr {
    border: none;
    border-top: 1px solid var(--theme-border-default);
    margin: 1rem 0;
  }

  & blockquote {
    margin: 1rem 2.5rem; /* 16px 40px = 16/16, 40/16 */
    padding: 0.5rem 1rem; /* 8px 16px = 8/16, 16/16 */
    font-style: italic;
    border-left: 0.25rem solid #cccccc; /* 4px = 4/16 */
    background-color: var(--theme-colors-gray-100);
    color: var(--theme-colors-gray-700);

    & p {
      margin: 0; /* Reset paragraph margin inside blockquote */
    }
  }

  & pre {
    margin: 1rem 0;
    background-color: var(--theme-colors-gray-50);
    color: var(--theme-colors-gray-50);
    overflow: auto;
    font-family: var(--theme-fonts-monospace);
  }

  & code {
    font-family: var(--theme-fonts-monospace);
    border-radius: 0.25rem;
  }

  & ul {
    margin: 0 0 1rem 0;
    padding-left: 2rem;
    list-style-type: disc;
  }

  & ol {
    margin: 0 0 1rem 0;
    padding-left: 2.5rem;
    list-style-type: decimal;
  }

  & li {
    margin: 0.25rem 0;
  }

  & table {
    width: var(--theme-sizes-full);
    margin: 1rem 0;
    text-align: left;

    & thead {
      border-bottom-width: 1px;
      border-bottom-color: var(--theme-colors-gray-300);
    }

    & th {
      text-align: inherit;
      font-weight: 600;
      padding: calc(3 * var(--rgu));
    }

    & td {
      padding: calc(3 * var(--rgu));
      vertical-align: baseline;
    }

    & tbody {
      & tr {
        border-bottom-width: 1px;
        border-bottom-color: var(--theme-border-default);
        &:hover {
          background-color: var(--theme-colors-gray-50);
        }

        &:last-of-type {
          border-bottom-width: 0px;
          border-bottom-color: transparent;
        }
      }
    }

    & tfoot tr {
      border-top-width: 1px;
      border-top-color: var(--theme-gray-300);
    }
  }
}

.content {
  display: contents;
}