.make-section-intent(@colors, @gradients) {
  &.cr-ct-faq-section--default {
    background-image: @gradients[light];
  }

  &.cr-ct-faq-section--primary {
    background-image: @gradients[dark];
    color: @gradients[dark-text-color];
  }

  &.cr-ct-faq-section--dark {
    background-color: @theme-secondary-base-color;
    color: @colors[color-99];
  }
}

.cr-ct-faq-section {
  @rootVariable: .cr-ct-faq-section;
  width: 100%;
  padding: 120px 0;
  position: relative;

  &--mobile {
    padding: 30px 0;
  }

  &__title {
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: capitalize;
    margin-top: 20px;
    &&--mobile {
      font-size: 20px;
    }
  }

  &__content-container {
    margin-top: 40px;
    &&--mobile {
      margin-top: 20px;
    }
  }

  &--font-variant-1 {
    font-family: @theme-font-variants[ @variant-1][body-font-family];

    @{rootVariable}__title {
      font-family: @theme-font-variants[ @variant-1][header-font-family] !important;
    }
  }

  &--font-variant-2 {
    font-family: @theme-font-variants[ @variant-2][body-font-family];

    @{rootVariable}__title {
      font-family: @theme-font-variants[ @variant-2][header-font-family] !important;
    }
  }

  &--font-variant-3 {
    font-family: @theme-font-variants[ @variant-3][body-font-family];

    @{rootVariable}__title {
      font-family: @theme-font-variants[ @variant-3][header-font-family] !important;
    }
  }

  &--theme-1 {
    .make-section-intent(@themes[@theme-1][@colors], @themes[@theme-1][@gradients]);
  }

  &--theme-2 {
    .make-section-intent(@themes[@theme-2][@colors], @themes[@theme-2][@gradients]);
  }

  &--theme-3 {
    .make-section-intent(@themes[@theme-3][@colors], @themes[@theme-3][@gradients]);
  }

  &--theme-4 {
    .make-section-intent(@themes[@theme-4][@colors], @themes[@theme-4][@gradients]);
  }

  &--theme-6 {
    .make-section-intent(@themes[@theme-6][@colors], @themes[@theme-6][@gradients]);
  }
}