.cols-form {
  position: relative;
  margin: 75px auto;
  max-width: $max-width;

  @include md{
    margin: 50px 0;
  }

  &__wrapper {
    display: flex;
    align-items: flex-start;

    @include md {
      flex-direction: column;
    }
  }

  &__col1 {
    flex-grow: 1;

    @include md{
      width: 100%;
      background-color: $background-blue;
    }
  }

  &__col1-box {
    position: relative;
    background-color: $background-blue;

    &::after {
      position: absolute;
      left: 100%;
      top: 0;
      content: '';
      display: block;
      pointer-events: none;
      background-color: $blue;
      width: 555px;
      height: 100%;

      @include mdx {
        width: 490px;
      }

      @include md {
        display: none;
      }
    }
  }

  &__col2 {
    width: 555px;
    flex-shrink: 0;
    padding: 32px 30px 0;

    @include mdx {
      width: 490px;
    }

    @include md{
      width: 100%;
      background-color: $background-blue;
      padding: 16px $gutter 24px;
    }

    @include sm{
      padding: 16px $gutter-mobile 24px;
    }

    &::after {
      position: absolute;
      right: 520px;
      top: 0;
      content: '';
      display: block;
      pointer-events: none;
      background-color: $background-blue;
      width: 30%;
      height: 100%;
      z-index: -1;

      @include mdx {
        right: 430px;
      }
    }
  }

  &__form {
    position: relative;
    background-color: $white;
    min-height: 100%;
    padding: 32px 60px 0;

    & > div {
      transition: opacity 250ms ease-out;
    }

    @include mdx {
      padding: 32px 40px 0;
    }

    @include md{
      padding: 0;
      overflow: hidden;
      height: 0;
      background-color: transparent;
      transition: all 250ms ease-out;

      & > div {
        opacity: 0;
        padding: 0 20px 16px;

        .js-form-open & {
          opacity: 1;
          transition-delay: 150ms;
        }
      }
    }
  }

  &__form-box {
    @include md{
      background-color: $white;
      width: auto;
      min-height: auto;
      padding: 0;
      border-radius: 46px;
      transition: all 250ms ease-out;
      max-width: 558px;

      .js-form-open & {
        border-radius: 16px;
      }
    }
  }

  &__form-title {
    display: none;
    position: relative;
    font-size: 3.8rem;
    line-height: 4.5rem;
    font-weight: 700;
    color: $primary-color;
    transition: all 250ms ease-out;

    @include md{
      display:  block;
      font-size: 2.1rem;
      line-height: 2.9rem;
      padding: 24px 50px 24px 32px;

      &::after {
        content: '';
        position: absolute;
        right: 32px;
        top: 50%;
        margin-top: -10px;
        display: block;
        height: 13px;
        width: 13px;
        border-bottom: 2px solid $primary-color;
        border-right: 2px solid $primary-color;
        border-radius: 1px;
        transform: rotate(45deg);
        transition: transform 250ms ease-out;

        .js-form-open & {
          transform: rotate(-135deg);
        }
      }
    }
  }

  &__title {
    color: $primary-color;
    font-size: 4.8rem;
    line-height: 5.2rem;
    margin: 0;

    @include md{
      font-size: 3.8rem;
      line-height: 4.2rem;
    }
  }

  &__col1-content {
    max-width: 558px;
    margin: 0 16.5%;
    padding: 64px 0 128px;
    color: $primary-color;

    @include mdx {
      margin: 0 $gutter;
    }

    @include md {
      margin: 0 $gutter;
      padding: 40px 0 16px;
    }

    @include sm{
      max-width: 100%;
      margin: 0 $gutter-mobile;
    }

    ul {
      max-width: 500px;
      list-style: none;
      padding: 0;

      li {
        padding-left: 40px;
        margin: 8px 0;
        background: url("../../../assets/img/svg/check-light-blue.svg") no-repeat 0 0;

        @include md{
          padding-left: 32px;
          background-size: 17px;
          background-position: 0 1px;
        }
      }
    }
  }

  &__testimonial {
    position: relative;
    background-color: $blue;
    border-radius: 18px;
    max-width: 558px;
    margin: -100px 16.5% 0;
    padding-bottom: 16px;
    overflow: hidden;

    @include mdx {
      margin: -100px $gutter 0;
      width: 400px;
    }

    @include md{
      width: auto;
      margin: 0 $gutter 0;
    }

    @include sm{
      margin: 0 $gutter-mobile 0;
      width: calc(100% - 32px);
    }

    p {
      margin: 0;
    }
  }

  &__testimonial-quote {
    font-style: italic;
    font-size: 1.8rem;

    @include sm {
      font-size: 1.6rem;
    }
  }

  &__testimonial-info {
    display: flex;
    font-size: 1.4rem;
    line-height: 2rem;
    margin-top: 16px;
    margin-bottom: 16px;
  }

  &__testimonial-name {
    font-size: 1.6rem;
    font-weight: 700;
  }

  &__testimonial-slider {
    padding: 24px 32px 0;
    cursor: grab;
  }

  &__testimonial-dots {
    display: flex;
    justify-content: center;
  }

  &__testimonial-image {
    margin-right: 16px;

    img {
      display: block;
      width: 40px;
    }
  }
}