@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);
}

$breakpoints: (
	na: 0px,
	// For BS grid
	xs: 576px,
	// Smartphone
	sm: 768px,
	// Tablets
	md: 992px,
	// Tablets Landscape and small desktops
	lg: 1200px,
	// Desktops
	xl: 1532px,
	// Large Desktop,,
);

@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) - 100px,
);

.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)});
			}
		}
	}
}