.title-block {
  position: relative;
  width: 100%;
  margin: 48px auto;
  padding: 0 $gutter;
  display: flex;
  justify-content: center;

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

  &__wrapper {
    width: 100%;
    max-width: $projects-detail-width;
    display: flex;
    flex-direction: column;
    align-items: center;

    * {
      text-align: center;
    }

    .title-block--left & {
      align-items: flex-start;

      * {
        text-align: left;
      }
    }


    .title-block--right & {
      align-items: flex-end;

      * {
        text-align: right;
      }
    }

    .title-block--center & {
      align-items: center;

      * {
        text-align: center;
      }
    }

    & > h1, & > h2, & > h3, & > h4 {
      max-width: 755px;
      color: $primary-color;
      font-weight: 600;
      letter-spacing: 0;
      text-align: center;
      margin: 0;

      .title-block--left & {
        text-align: left;
      }

      .title-block--right & {
        text-align: right;
      }

      .title-block--center & {
        text-align: center;
      }
    }
  }

  &__subject-link {
    max-width: 755px;
  }

  &__subject {
    max-width: 755px;
    display: inline-block !important;
    color: $medium-color !important;
    text-align: center;
    font-family: $font-default !important;
    font-size: 1.6rem !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 120% !important;
    letter-spacing: 0.16px !important;
    margin: 0 0 20px !important;

    .title-block--left & {
      text-align: left;
    }

    .title-block--right & {
      text-align: right;
    }

    .title-block--center & {
      text-align: center;
    }
  }

  p {
    max-width: 755px;
    color: $primary-color;
    font-size: 21px;
    letter-spacing: 0;
    text-align: center;
    font-weight: 400;
    margin: 20px 0 0;

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

    .title-block--left & {
      text-align: left;
    }

    .title-block--right & {
      text-align: right;
    }

    .title-block--center & {
      text-align: center;
    }
  }

  &__cta {
    text-align: center;

    .std-button {
      margin: 32px 0 0;
      padding: 0 24px;
      min-width: 440px;

      @include sm {
        min-width: 0;
      }
    }

    .title-block--left & {
      text-align: left;
    }

    .title-block--right & {
      text-align: right;
    }

    .title-block--center & {
      text-align: center;
    }
  }
}