.project-text {
  position: relative;
  margin: 50px 0;

  &__container {
    position: relative;
    width: 100%;
    max-width: #{$text-width-large + 2 * $gutter};
    margin: 0 auto;
    padding: 0 $gutter;
    color: $primary-color;
    font-size: 18px;

    .project-text--small & {
      max-width: #{$text-width-small + 2 * $gutter};
    }

    .project-text--medium & {
      max-width: #{$text-width-medium + 2 * $gutter};
    }

    @include sm {
      padding: 0 $gutter-mobile;
    }

    .project-text__title {
      color: $primary-color;
      margin: 0 0 24px;

      @include sm {
        margin: 30px 0 24px;
      }
    }

    p {
      &:first-child {
        margin-top: 0;
      }
      &:last-child {
        margin-bottom: 0;
      }

      @include sm {
        font-size: 16px;
      }

      a {
        text-decoration: underline;
      }
    }
  }

  &__column {
    column-count: 2;
    column-gap: $gutter;

    @include sm {
      column-count: 1;
      column-gap: unset;
    }

    .project-text--1col & {
      column-count: 1;
      column-gap: unset;
    }
  }
}