// GLOBAL BREAKPOINTS
.container {
  display: flex;
  flex-wrap: wrap;
}

//OUTER MARGINS
$sm-outer-margin: map-get($base-breakpoints-outer-margin, 'sm');

//from 0 to 576px at least 24px
@media only screen and (max-width: map-get($base-breakpoints, 'md')) {
  .container {
    padding-left: $sm-outer-margin;
    padding-right: $sm-outer-margin;
  }
}

$md-outer-margin: map-get($base-breakpoints-outer-margin, 'md');

//from 576px to 992px at least 32px
@media only screen and (min-width: map-get($base-breakpoints, 'md') + 1) and (max-width: map-get($base-breakpoints, 'lg')) {
  .container {
    padding-left: $md-outer-margin;
    padding-right: $md-outer-margin;
  }
}

$lg-outer-margin: map-get($base-breakpoints-outer-margin, 'lg');

//from 993px to 1240px at least 32px
@media only screen and (min-width: map-get($base-breakpoints, 'lg') + 1) and (max-width: map-get($base-breakpoints, 'lm') + 2 * $lg-outer-margin) {
  .container {
    padding-left: $lg-outer-margin;
    padding-right: $lg-outer-margin;
  }
}

//from 1240px to 1440px max-width 1240px
@media only screen and (min-width: map-get($base-breakpoints, 'lm') + 2 * $lg-outer-margin + 1) and (max-width: map-get($base-breakpoints, 'xl')) {
  .container {
    margin: 0 auto;
    max-width: map-get($base-breakpoints, 'lm');
  }
}

$xl-outer-margin: map-get($base-breakpoints-outer-margin, 'xl');

//from 1440px to 1504px at least 32px
@media only screen and (min-width: map-get($base-breakpoints, 'xl') + 1) and (max-width: map-get($base-breakpoints, 'xl') + 2 * $xl-outer-margin) {
  .container {
    padding-left: $xl-outer-margin;
    padding-right: $xl-outer-margin;
  }
}

//from 1505px to 1680px max-width 1440px
@media only screen and (min-width: map-get($base-breakpoints, 'xl') + 2 * $xl-outer-margin + 1) and (max-width: map-get($base-breakpoints, 'xxl')) {
  .container {
    margin: 0 auto;
    max-width: map-get($base-breakpoints, 'xl');
  }
}

$xxl-outer-margin: map-get($base-breakpoints-outer-margin, 'xxl');

//from 1681px to 1744px at least 32px
@media only screen and (min-width: map-get($base-breakpoints, 'xxl') + 1) and (max-width: map-get($base-breakpoints, 'xxl') + 2 * $xxl-outer-margin) {
  .container {
    padding-left: $xxl-outer-margin;
    padding-right: $xxl-outer-margin;
  }
}

//from 1745px and above max-width 1680px
@media only screen and (min-width: map-get($base-breakpoints, 'xxl') + 2 * $xxl-outer-margin + 1) {
  .container {
    margin: 0 auto;
    max-width: map-get($base-breakpoints, 'xxl');
  }
}

//GRID COLUMNS
@media only screen and (max-width: map-get($base-breakpoints, 'md')) {
  $gutter-num: map-get($base-breakpoints-col-num, 'sm') - 1;
  $gutter-size: map-get($base-breakpoints-gutter, 'sm');
  $col-num: map-get($base-breakpoints-col-num, 'sm');
  @for $size from 1 through map-get($base-breakpoints-col-num, 'sm') {
    .col-sm-#{$size} {
      flex: 0 0 calc((#{$size} * ((100% - #{$gutter-num} * #{$gutter-size}) / #{$col-num})) + (#{$size} - 1) * #{$gutter-size});
      max-width: calc((#{$size} * ((100% - #{$gutter-num} * #{$gutter-size}) / #{$col-num})) + (#{$size} - 1) * #{$gutter-size});
      padding-left: 0;
      padding-right: 0;

      @if $size != map-get($base-breakpoints-col-num, 'sm') {
        margin-right: map-get($base-breakpoints-gutter, 'sm');
      }
    }

    .col-offset-sm-#{$size} {
      margin-left: calc((#{$size} * ((100% - #{$gutter-num} * #{$gutter-size}) / #{$col-num})) + #{$size} * #{$gutter-size});
    }

    .col-sm-#{$size}-wrap {
      div:nth-child(#{$size}n) {
        margin-right: 0;
      }
    }
  }
}

@media only screen and (min-width: map-get($base-breakpoints, 'md') + 1) and (max-width: map-get($base-breakpoints, 'lg')) {
  $gutter-num: map-get($base-breakpoints-col-num, 'md') - 1;
  $gutter-size: map-get($base-breakpoints-gutter, 'md');
  $col-num: map-get($base-breakpoints-col-num, 'md');
  @for $size from 1 through map-get($base-breakpoints-col-num, 'md') {
    .col-md-#{$size} {
      flex: 0 0 calc((#{$size} * ((100% - #{$gutter-num} * #{$gutter-size}) / #{$col-num})) + (#{$size} - 1) * #{$gutter-size});
      max-width: calc((#{$size} * ((100% - #{$gutter-num} * #{$gutter-size}) / #{$col-num})) + (#{$size} - 1) * #{$gutter-size});
      padding-left: 0;
      padding-right: 0;

      @if $size != map-get($base-breakpoints-col-num, 'md') {
        margin-right: map-get($base-breakpoints-gutter, 'md');
      }
    }

    .col-offset-md-#{$size} {
      margin-left: calc((#{$size} * ((100% - #{$gutter-num} * #{$gutter-size}) / #{$col-num})) + #{$size} * #{$gutter-size});
    }

    .col-md-#{$size}-wrap {
      div:nth-child(#{$size}n) {
        margin-right: 0;
      }
    }
  }
}

@media only screen and (min-width: map-get($base-breakpoints, 'lg') + 1) and (max-width: map-get($base-breakpoints, 'xl')) {
  $gutter-num: map-get($base-breakpoints-col-num, 'lg') - 1;
  $gutter-size: map-get($base-breakpoints-gutter, 'lg');
  $col-num: map-get($base-breakpoints-col-num, 'lg');
  @for $size from 1 through map-get($base-breakpoints-col-num, 'lg') {
    .col-lg-#{$size} {
      flex: 0 0 calc((#{$size} * ((100% - #{$gutter-num} * #{$gutter-size}) / #{$col-num})) + (#{$size} - 1) * #{$gutter-size});
      max-width: calc((#{$size} * ((100% - #{$gutter-num} * #{$gutter-size}) / #{$col-num})) + (#{$size} - 1) * #{$gutter-size});
      padding-left: 0;
      padding-right: 0;

      @if $size != map-get($base-breakpoints-col-num, 'lg') {
        margin-right: map-get($base-breakpoints-gutter, 'lg');
      }
    }

    .col-offset-lg-#{$size} {
      margin-left: calc((#{$size} * ((100% - #{$gutter-num} * #{$gutter-size}) / #{$col-num})) + #{$size} * #{$gutter-size});
    }

    .col-lg-#{$size}-wrap {
      div:nth-child(#{$size}n) {
        margin-right: 0;
      }
    }
  }
}

@media only screen and (min-width: map-get($base-breakpoints, 'xl') + 1) and (max-width: map-get($base-breakpoints, 'xxl')) {
  $gutter-num: map-get($base-breakpoints-col-num, 'xl') - 1;
  $gutter-size: map-get($base-breakpoints-gutter, 'xl');
  $col-num: map-get($base-breakpoints-col-num, 'xl');
  @for $size from 1 through map-get($base-breakpoints-col-num, 'xl') {
    .col-xl-#{$size} {
      flex: 0 0 calc((#{$size} * ((100% - #{$gutter-num} * #{$gutter-size}) / #{$col-num})) + (#{$size} - 1) * #{$gutter-size});
      max-width: calc((#{$size} * ((100% - #{$gutter-num} * #{$gutter-size}) / #{$col-num})) + (#{$size} - 1) * #{$gutter-size});
      padding-left: 0;
      padding-right: 0;

      @if $size != map-get($base-breakpoints-col-num, 'xl') {
        margin-right: map-get($base-breakpoints-gutter, 'xl');
      }
    }

    .col-offset-xl-#{$size} {
      margin-left: calc((#{$size} * ((100% - #{$gutter-num} * #{$gutter-size}) / #{$col-num})) + #{$size} * #{$gutter-size});
    }

    .col-xl-#{$size}-wrap {
      div:nth-child(#{$size}n) {
        margin-right: 0;
      }
    }
  }
}

@media only screen and (min-width: map-get($base-breakpoints, 'xxl') + 1) {
  $gutter-num: map-get($base-breakpoints-col-num, 'xxl') - 1;
  $gutter-size: map-get($base-breakpoints-gutter, 'xxl');
  $col-num: map-get($base-breakpoints-col-num, 'xxl');
  @for $size from 1 through map-get($base-breakpoints-col-num, 'xxl') {
    .col-xl-#{$size} {
      flex: 0 0 calc((#{$size} * ((100% - #{$gutter-num} * #{$gutter-size}) / #{$col-num})) + (#{$size} - 1) * #{$gutter-size});
      max-width: calc((#{$size} * ((100% - #{$gutter-num} * #{$gutter-size}) / #{$col-num})) + (#{$size} - 1) * #{$gutter-size});
      padding-left: 0;
      padding-right: 0;

      @if $size != map-get($base-breakpoints-col-num, 'xxl') {
        margin-right: map-get($base-breakpoints-gutter, 'xxl');
      }
    }

    .col-offset-xl-#{$size} {
      margin-left: calc((#{$size} * ((100% - #{$gutter-num} * #{$gutter-size}) / #{$col-num})) + #{$size} * #{$gutter-size});
    }

    .col-xl-#{$size}-wrap {
      div:nth-child(#{$size}n) {
        margin-right: 0;
      }
    }
  }
}