.field--type-text-long,
.field--type-text-with-summary {
  /* fix floated items inside body globally */
  &:after {
    content: "";
    clear: both;
    display: table;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
    color: var(--primary-01);
  }

  a:hover {
    color: var(--primary-01);
    text-decoration: none;
  }

  .btn {
    &:after {
      color: var(--accent-02);
    }

    &:hover {
      color: var(--neutral-01);
      text-decoration: none;

      &:after {
        color: var(--accent-02);
      }
    }
  }

  .btn--outline {
    &:after {
      color: var(--primary-01);
    }
  }

  .background--primary-01 & {
    a:hover {
      color: var(--accent-02);
    }

    .btn {
      &:after {
        color: inherit;
      }

      &:hover {
        color: var(--primary-01);

        &:after {
          color: inherit;
        }
      }
    }

    h1, h2, h3, h4, h5, h6 {
      color: var(--neutral-01);
    }
  }

  p {
    margin-top: 0.5rem;
    margin-bottom: 1rem;

    &:last-of-type {
      margin-bottom: 0;
    }
  }

  ul,
  ol {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    padding-left: 2rem;

    li {
      margin-bottom: 0.5rem;
    }
  }

  ul {
    list-style-type: disc;

    ul {
      list-style-type: circle;

      ul {
        list-style-type: square;
      }
    }
  }

  ol {
    list-style-type: decimal;

    ol {
      list-style-type: lower-latin;

      ol {
        list-style-type: lower-roman;

        ol {
          list-style-type: upper-latin;

          ol {
            list-style-type: upper-roman;;
          }
        }
      }
    }
  }

  hr {
    border-color: var(--accent-02);
    margin-block: 1.5rem;
  }

  .text--small {
    font-size: var(--text-sm);
    line-height: var(--line-h-text-sm);
  }

  .text--medium {
    font-size: var(--text-md);
    line-height: var(--line-h-text-md);
  }

  .text--large {
    font-size: var(--text-lg);
    line-height: var(--line-h-text-lg);
  }

  blockquote {
    font-size: var(--title-xl);
    line-height: var(--line-h-title-xl);
    letter-spacing: 0.03px;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
  }

  img {
    margin-top: 1rem;
    margin-bottom: 2rem;

    &.align-center {
      margin-left: auto;
      margin-right: auto;
    }

    &.align-right {
      margin-left: 2rem;
    }

    &.align-left {
      margin-right: 2rem;
    }
  }

  .caption-img {
    img {
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  .caption,
  .media {
    margin-top: 1rem;
    margin-bottom: 2rem;

    .field--name-field-media-caption {
      font-size: var(--text-sm);
      margin-bottom: 2rem;
    }

    &.align-center {
      margin-left: auto;
      margin-right: auto;
      display: table;
    }

    &.align-right {
      margin-left: 2rem;

      .field--name-field-media-caption {
        margin-left: 2rem;
      }
    }

    &.align-left {
      margin-right: 2rem;

      .field--name-field-media-caption {
        margin-right: 2rem;
      }
    }

    img {
      margin: 0;
    }
  }

  figure {
    margin-top: 1rem;
    margin-bottom: 2rem;

    .media {
      margin: 0;
    }

    figcaption {
      font-size: var(--text-sm);
      letter-spacing: 0.064px;
      line-height: 1.14;
    }
  }

  &.spaceless-body {
    p,
    ul,
    ol {
      &:first-child {
        margin-top: 0;
      }
    }
  }

  .media {
    .content_wrapper {
      display: table;
    }

    .field--name-field-media-caption {
      display: table-caption;
      caption-side: bottom;
    }
  }
  .media.media--type-remote-audio {
    .content_wrapper {
      display: revert;
      .field--name-field-media-media-iframe {
      iframe {
        width: 100%;
        height: 80%;
      }
    }
  }
}

  figure {
    display: table;

    figcaption {
      display: table-caption;
      caption-side: bottom;
      margin-top: 1rem;
    }
  }

  .caption-drupal-media .media {
    .field--name-field-media-caption {
      display: none;
    }
  }
}

.spaceless-body {
  &,
  .field--type-text-long {
    p {
      margin-top: 0;
      margin-bottom: 0;
    }
  }
}

@media only screen and (min-width: 768px) {
  .list--three-col {
    column-count: 3;
    column-gap: 1rem;
  }
}

@media only screen and (max-width: 767px) {
  .field--type-text-long,
  .field--type-text-with-summary {
    .caption,
    .media,
    img {
      width: 100%;

      &.align-right,
      &.align-left {
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
        width: 100%;
      }
    }

    .media-embed-resized {
      width: 100% !important;
    }
  }
}

.field--type-text-long .media-embed-resized {
  max-width: 100%;
}