@import '../../styles/mixins'
@import '../../styles/colors'

.vs-row
  width: 100%
  position: relative
  display: flex
  align-items: flex-start
  justify-content: flex-start
  flex-wrap: wrap

$sizes: (1: 8.33%, 2: 16.66%, 3: 25%, 4: 33.33%, 5: 41.66%, 6: 50%, 7: 58.33%, 8: 66.66%, 9: 75%, 10: 83.33%, 11: 91.66%, 12: 100%)

.vs-col
  width: 100%
  position: relative

  @each $num ,$size in $sizes
    &--w-#{$num}
      width: $size

  @each $num ,$size in $sizes
    &--offset-#{$num}
      margin-left: $size

  // responsive
  @each $num ,$size in $sizes
    &--lg-#{$num}
      width: $size

  @media (max-width: 900px)
    @each $num ,$size in $sizes
      &--sm-#{$num}
        width: $size

  @media (max-width: 600px)
    @each $num ,$size in $sizes
      &--xs-#{$num}
        width: $size