@layer layouts {
  /*
   * Article content
   */
  
  .article-content {
    margin: 0 auto;
    max-width: 45rem;
    text-align: left;
    word-wrap: break-word;
    font-size: 1.25rem;
  
    p,
    ul,
    blockquote {
      font-size: 1.25rem;
  
      @media (max-width: 991.98px) {
        font-size: 1.188rem;
      }
  
      @media (max-width: 639.98px) {
        font-size: 1.188rem;
      }
  
      @media (max-width: 399.98px) {
        font-size: 1.125rem;
      }
    }
  
    h1,
    h2 {
      color: var(--color-primary);
    }
  
    h1 {
      @media screen and (min-width: 320px) /* fluid typography min */ {
        font-size: calc(24px + 4 * ((100vw - 320px) / 680));
      }
  
      @media screen and (min-width: 1680px) /* fluid typography max */ {
        font-size: 32px;
      }
    }
  
    h2 {
      @media screen and (min-width: 320px) /* fluid typography min */ {
        font-size: calc(20px + 2 * ((100vw - 320px) / 680));
      }
  
      @media screen and (min-width: 1680px) /* fluid typography max */ {
        font-size: 24px;
      }
    }
  
    .list-unstyled {
      margin-left: 2rem;
    }
  
    blockquote {
      background-color: var(--color-grey-050);
      border-left: 1px solid var(--color-primary);
      font-style: italic;
      margin: 2rem 0;
      padding: 1rem;
    }
  
    .highlight {
      background-color: rgb(var(--rgb-amber) / 0.24);
      border-radius: 2px;
      color: var(--color-amber-darker);
    }
  
    .btn {
      margin-top: 2.5rem;
  
      @media (max-width: 639.98px) {
        margin-top: 2rem;
      }
    }
  
    .table-container {
      width: 100%;
      overflow: auto;
    }
  
    table {
      color: var(--color-grey-500);
      border-collapse: collapse;
      width: 100%;
      font-size: 1.25rem;
  
      @media (max-width: 991.98px) {
        font-size: 1.188rem;
      }
  
      @media (max-width: 639.98px) {
        font-size: 1.125rem;
      }
  
      @media (max-width: 399.98px) {
        font-size: 1.063rem;
      }
  
      @media (max-width: 639.98px) {
        font-size: .938rem;
      }
  
      tr {
        border: 1px solid var(--color-grey-100);
      }
  
      th,
      td {
        padding: 1rem;
      }
  
      th {
        background-color: var(--color-grey-050);
        color: var(--color-grey-500);
        font-weight: 400;
        text-align: left;
        white-space: nowrap;
      }
  
      td {
        color: var(--color-grey-600);
        vertical-align: top;
      }
    }
  }
  
  .article-content > * + h1 {
    margin-top: 3rem;
  
    @media (max-width: 639.98px) {
      margin-top: 2rem;
    }
  }
  
  .article-content > * + h2 {
    margin-top: 3rem;
  
    @media (max-width: 639.98px) {
      margin-top: 2rem;
    }
  }
}