@use "sass:map";

$breakpoints: (
	"extra-small": 576px,
	"small": 768px,
	"medium": 992px,
	"large": 1200px,
	"extra-large": 1400px,
	"extra-extra-large": 1600px
);

$container-widths: (
	"extra-small": 100%,
	"small": 510px,
	"medium": 700px,
	"large": 950px,
	"extra-large": 1200px,
	"extra-extra-large": 1450px
);

@mixin container {
	width: 100%;
	@each $breakpoint, $size in $breakpoints {
		@media (min-width: $size) {
			max-width: map.get($container-widths, $breakpoint);
		}
	}
}