@import "flive-vars";

.base {
  width: 100%;
}

@media (min-width: $screen-xs-min) and (max-width: $screen-xs-max) {
  .x-small-1{
    @include blocks-wrapper(1);
  }
  .x-small-2 {
    @include blocks-wrapper(2);
  }
  .x-small-3 {
    @include blocks-wrapper(3);
  }
  .x-small-4 {
    @include blocks-wrapper(4);
  }
  .x-small-5 {
    @include blocks-wrapper(5);
  }
  .x-small-6 {
    @include blocks-wrapper(6);
  }
  .x-small-7 {
    @include blocks-wrapper(7);
  }
  .x-small-8 {
    @include blocks-wrapper(8);
  }
  .x-small-9 {
    @include blocks-wrapper(9);
  }
  .x-small-10 {
    @include blocks-wrapper(10);
  }
  .x-small-11 {
    @include blocks-wrapper(11);
  }
  .x-small-12 {
    width: 100%;
  }
}
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
  .small-1{
    @include blocks-wrapper(1);
  }
  .small-2 {
    @include blocks-wrapper(2);
  }
  .small-3 {
    @include blocks-wrapper(3);
  }
  .small-4 {
    @include blocks-wrapper(4);
  }
  .small-5 {
    @include blocks-wrapper(5);
  }
  .small-6 {
    @include blocks-wrapper(6);
  }
  .small-7 {
    @include blocks-wrapper(7);
  }
  .small-8 {
    @include blocks-wrapper(8);
  }
  .small-9 {
    @include blocks-wrapper(9);
  }
  .small-10 {
    @include blocks-wrapper(10);
  }
  .small-11 {
    @include blocks-wrapper(11);
  }
  .small-12 {
    width: 100%;
  }
}
@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
  .medium-1{
    @include blocks-wrapper(1);
  }
  .medium-2 {
    @include blocks-wrapper(2);
  }
  .medium-3 {
    @include blocks-wrapper(3);
  }
  .medium-4 {
    @include blocks-wrapper(4);
  }
  .medium-5 {
    @include blocks-wrapper(5);
  }
  .medium-6 {
    @include blocks-wrapper(6);
  }
  .medium-7 {
    @include blocks-wrapper(7);
  }
  .medium-8 {
    @include blocks-wrapper(8);
  }
  .medium-9 {
    @include blocks-wrapper(9);
  }
  .medium-10 {
    @include blocks-wrapper(10);
  }
  .medium-11 {
    @include blocks-wrapper(11);
  }
  .medium-12 {
    width: 100%;
  }
}
@media (min-width: $screen-lg-min) {
  .large-1{
    @include blocks-wrapper(1);
  }
  .large-2 {
    @include blocks-wrapper(2);
  }
  .large-3 {
    @include blocks-wrapper(3);
  }
  .large-4 {
    @include blocks-wrapper(4);
  }
  .large-5 {
    @include blocks-wrapper(5);
  }
  .large-6 {
    @include blocks-wrapper(6);
  }
  .large-7 {
    @include blocks-wrapper(7);
  }
  .large-8 {
    @include blocks-wrapper(8);
  }
  .large-9 {
    @include blocks-wrapper(9);
  }
  .large-10 {
    @include blocks-wrapper(10);
  }
  .large-11 {
    @include blocks-wrapper(11);
  }
  .large-12 {
    width: 100%;
  }
}