.article_intro_section {
  text-align: center;
  padding-top: 48px;
  padding-bottom: 0px;

  @media only screen and (min-width: 701px) {
    padding-top: 0;
  }

  a {
    align-self: flex-start;
    font-size: var(--text-sm);
    display: inline-flex;
    align-items: center;
    line-height: 100%;
    position: absolute;
    top: 0;
    color: var(--color-text-link);
    text-decoration: none;

    span {
      display: inline-flex;
      align-items: center;
      margin-right: 6px;

      svg {
        rotate: 180deg;
        width: 12px;
        height: 12px;
      }
    }
  }

  .article_badge {
    background-color: var(--color-bg-primary);
    padding: 2px 6px;
    color: var(--color-text-primary);
    border-radius: var(--radius-xs);
    border: 1px solid var(--color-border-neutral);
  }

  .article_typography_break--responsive {
    display: none;

    @media only screen and (min-width: 576px) {
      display: inline;
    }
  }
}

.article_content_section {
  background-color: var(--color-bg-primary);
  padding: 106px 0;

  .article_content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;

    h2:first-of-type {
      margin-top: 0;
    }

    section {
      h2 + p,
      h3 + p,
      h2 + ul,
      h3 + ul,
      h2 + ol,
      h3 + ol,
      p + p,
      p + ul,
      ul + p,
      p + ol,
      ol + p,
      table + p {
        margin-top: 12px !important;

        @media only screen and (min-width: 900px) {
          margin-top: 16px !important;
        }
      }

      h2 + h3,
      ul + h3,
      p + h3,
      p + h3,
      ul + h3,
      ol + h3,
      table + h3 {
        margin-top: 16px;

        @media only screen and (min-width: 900px) {
          margin-top: 24px;
        }
      }

      p + h2,
      ul + h2,
      ol + h2 {
        margin-top: 32px !important;

        @media only screen and (min-width: 900px) {
          margin-top: 40px !important;
        }
      }

      p,
      ul,
      ol,
      table {
        font-size: var(--body1-mobile);
        margin: 0;
        color: var(--color-text-secondary);
        line-height: 1.4;

        @media only screen and (min-width: 900px) {
          font-size: var(--body1-desktop);
        }
      }

      ul,
      ol {
        padding-left: 30px;
      }

      a {
        color: var(--color-text-link);
        text-decoration: none;
        font-size: var(--body1-mobile);
        margin: 0;
        line-height: 1.4;

        @media only screen and (min-width: 900px) {
          font-size: var(--body1-desktop);
        }
      }

      .article_text_highlight {
        font-weight: 600;
      }

      table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 16px;
        border-radius: var(--radius-sm);
        table-layout: fixed;

        thead {
          background: var(--color-bg-secondary);
        }

        th,
        td {
          padding: 12px 16px;
          border: 1px solid var(--color-border-neutral);
          text-align: left;
          hyphens: auto;
          overflow-wrap: break-word;
          word-break: break-word;

          @media only screen and (min-width: 900px) {
            padding: 16px 20px;
          }
        }

        tr:hover {
          background: #f0f8ff;
        }

        th {
          font-weight: 600;
        }

        .article_table_text--center {
          text-align: center;
        }
      }
    }
  }
}

.article_cta_section {
  padding: 24px 0 80px 0;
  overflow: hidden;
}