.choose-us {
  &.section {
  }

  &__thumb {
    max-width: 585px;
    margin-left: auto;
    border-radius: 20px;
    overflow: hidden;
    @include breakpoint(max-md) {
      border-radius: 10px;
    }
  }
  &__content {
  }
  &__box {
    @extend %d-flex, %item-center;
    gap: 60px;
    border-radius: 20px;
    background: $color-2;
    padding: 40px;
    &:not(:last-of-type) {
      margin-bottom: 30px;
    }
    @include transition($transition);

    @include breakpoint(max-xl) {
      border-radius: 10px;
      padding: 20px;
      gap: 30px;
      &:not(:last-of-type) {
        margin-bottom: 20px;
      }
    }

    svg {
      color: $color-primary;
      width: 65px;
      height: 65px;
      @include transition($transition);

      @include breakpoint(max-xl) {
        width: 50px;
        height: 50px;
      }
    }

    .title {
      color: $color-white;
      @include transition($transition);
    }

    &:hover,
    &.active {
      background-color: $color-primary;

      .title,
      svg {
        color: $color-1;
      }
    }
  }
}
