@import '../../style/themes/index.less';
@import '../../style/mixins/flex.less';
@depot-prefix-cls: ~'@{depot-prefix}-list';

.@{depot-prefix-cls} {
  width: 100%;
  display: block;
  font-size: 0;
  @R: ~'.@{depot-prefix-cls}';

  &&-col-1 {
    @{R}-item {
      width: 100%;
      flex: 0 0 100%;
    }
  }
  &&-col-2 {
    @{R}-item {
      width: 50%;
    }
    @{R}-span-col-2@{R}-item {
      width: 100%;
    }
  }
  &&-col-3 {
    @{R}-item {
      width: 33.3333%;
    }
    @{R}-span-col-2@{R}-item {
      width: 66.6666%;
    }
    @{R}-span-col-3@{R}-item {
      width: 100%;
    }
  }
  &&-col-4 {
    @{R}-item {
      width: 25%;
    }
    @{R}-span-col-2@{R}-item {
      width: 50%;
    }
    @{R}-span-col-3@{R}-item {
      width: 75%;
    }
    @{R}-span-col-4@{R}-item {
      width: 100%;
    }
  }

  & &-item {
    display: inline-block;
    font-size: 14px;
  }
}