@mixin min($bp, $max: "null", $device: "screen") {
  @if $max == "null" {
    @media only #{$device} and (min-width: #{$bp}) {
      @content;
    }
  } @else {
    @media only #{$device} and (min-width: #{$bp}) and (max-width: #{$max}) {
      @content;
    }
  }
}

@function bp($bp) {
  @return map-get($breakpoints, $bp);
}

@function container($container-size, $true-val: false) {
  @return map-get($container-sizes, $container-size);
}

$container-sizes: (
  sm: map-get($breakpoints, sm) - 30px,
  md: map-get($breakpoints, md) - 40px,
  lg: map-get($breakpoints, lg) - 50px,
  xl: map-get($breakpoints, xl) - 400px,
);

.container {
  padding-right: 1rem;
  padding-left: 1rem;

  &:not(.is-fluid) {
    margin: 0 auto;

    @each $bp, $container-size in $container-sizes {
      @include min(#{bp(#{$bp})}) {
        width: 100%;
        max-width: container(#{$bp});
      }
    }
  }
}

@each $bp, $container-size in $container-sizes {
  .container-#{$bp} {
    margin: 0 auto;
    padding-right: 1rem;
    padding-left: 1rem;
    width: 100%;

    $i: index($container-sizes, $bp $container-size);

    @for $j from $i through length($container-sizes) {
      @include min(#{bp(nth(nth($container-sizes, $j), 1))}) {
        max-width: container(#{nth(nth($container-sizes, $j), 1)});
      }
    }
  }
}