@function grid($col) {
  $width: $col / $grid-columns * 100 + '%';
  @return calc(#{$width} - #{$grid-gutter});
}

%complementar {
  position: relative;
  width: 100%;
}

@mixin grid-structure {
  @extend %complementar;
  min-height: 1px;
  margin-left: $spacing-margin-xxsmall;
  margin-right: $spacing-margin-xxsmall;
  @include device-size(small) {
    flex-basis: 100%;
    max-width: 100%;
  }
}

@for $i from 1 through $grid-columns {
  $vertical-width: $i / $grid-columns * 100 + '%';
  .col-#{$i} {
    flex: 0 0 grid($i);
    max-width: grid($i);
  }
  .col-#{$i}-m {
    @include device-size(medium) {
      flex: 0 0 grid($i);
      max-width: grid($i);
    }
  }
}

[class*=col-] {
  @include grid-structure();
}

.tao__row {
  @extend %complementar;
  display: flex;
  flex-wrap: wrap;
  margin: {
    left: - $spacing-margin-xxsmall;
    right: - $spacing-margin-xxsmall;
  }
  &-center {
    justify-content: center;
    margin: {
      left: auto;
      right: auto;
    }
  }
}

.tao__container {
  @extend %complementar;
  max-width: $size-device-large;
  padding: {
    left: $spacing-padding-medium;
    right: $spacing-padding-medium;
  }
  margin: {
    left: auto;
    right: auto;
  }
  @include device-size(medium) {
    max-width: $size-device-medium;
    padding: 0 $spacing-padding-xxsmall;
  }
  @include device-size(small) {
    max-width: $size-device-small;
  }
}

:export {
  sizeDeviceLarge: $size-device-large;
  sizeDeviceMedium: $size-device-medium;
  sizeDeviceSmall: $size-device-small;
}