@import '../helpers/helpers';

.tradepro-about {
  .trade-page {
    .tradePro-credit {
      .card {
        &__list {
          list-style: none;

          &-info {
            padding-left: 30px;
          }
        }

        &__descr {
          padding-left: 0;
        }
      }

      @include media-breakpoint-down(sm) {
        .card {
          &__actions {
            padding-left: 0;

            a {
              width: 100%;
              white-space: normal;
            }
          }
        }
      }

      @include media-breakpoint-only(md) {
        .card {
          &__content {
            padding-top: 10px;
          }

          &__title,
          &__info {
            margin-bottom: 5px;
          }

          &__list {
            padding-bottom: 0;

            &-item {
              padding-bottom: 5px;
            }
          }

          &__actions {
            margin-top: 0;
          }
        }
      }

      @include media-breakpoint-only(lg) {
        .card {
          &__content {
            padding-top: 10px;
          }

          &__title,
          &__info {
            margin-bottom: 5px;
          }

          &__list {
            padding-bottom: 0;

            &-item {
              padding-bottom: 5px;
            }
          }

          &__actions {
            margin-top: 0;
          }
        }
      }
    }

    .card {
      &__img-wrap {
        @include media-breakpoint-up(md) {
          @include make-col(6);
        }

        padding: 0;
      }

      &__inner {
        border: 1px solid $gray;
        padding: 0;
      }

      &__content {
        padding: 30px 0 0 30px;

        @include media-breakpoint-down(sm) {
          padding-left: 15px;
          padding-top: 0;
        }

        @include media-breakpoint-up(md) {
          @include make-col(6);
        }
      }

      &__title {
        font-size: 1rem;

        @include media-breakpoint-up(md) {
          font-size: .875rem;
        }

        @include media-breakpoint-up(xl) {
          font-size: 1rem;
        }
      }

      &__descr {
        padding-left: 18px;
      }

      &__list {
        list-style: disc;

        &-item {
          padding-left: 0;
        }
      }
    }
  }

  .tradePro-card {
    @include media-breakpoint-down(sm) {
      min-width: 100%;
    }

    .card {
      &__title {
        font-size: 1.125rem;
      }

      &__descr,
      &__list {
        @include primary-text;

        &-link {
          font-weight: 500;
        }
      }

      &__actions {
        @include media-breakpoint-down(sm) {
          .btn {
            width: 100%;
            white-space: inherit;
          }
        }
      }
    }
  }

  .content {
    @include media-breakpoint-down(sm) {
      padding: 0;
    }
  }

  .left-aside {
    @include media-breakpoint-down(sm) {
      margin-bottom: 60px;
    }
  }

  .small-print {
    @include additional-text;
  }
}