@use "sass:list";
@use "sass:map";

.container {
	width: 100%;
	max-width: $content-max-width;
	margin-left: auto;
	margin-right: auto;
	padding-left: $content-padding-1;
	padding-right: $content-padding-1;
}

@include mediaQ(xl) {
	.container-xl-expand {
		margin-left: -100px;
		margin-right: -100px;
	}
}

.container-full-width {
	max-width: 1920px;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
}

.row {
	display: flex;
	flex-wrap: wrap;
	margin-left: -$gutter-half;
	margin-right: -$gutter-half;

	&-sm {
		margin-left: -$sp-2;
		margin-right: -$sp-2;

		> .col {
			padding-left: $sp-2;
			padding-right: $sp-2;
		}
	}
}

.col {
	flex: 0 0 auto;
	width: 100%;
	padding-left: $gutter-half;
	padding-right: $gutter-half;
}

$grid-widths: (
	list.nth($break-names, 1): ( 33:33.33%, 50:50%, 66:66.667%),
	list.nth($break-names, 2): ( 33:33.33%, 50:50%, 66:66.667%, 100: 100%),
	list.nth($break-names, 3): ( 20:20%, 25:25%, 33:33.33%, 50:50%, 66:66.667%, 75:75%, 80:80%, 100: 100%),
	list.nth($break-names, 4): ( 20:20%, 25:25%, 33:33.33%, 50:50%, 66:66.667%, 75:75%, 80:80%, 100:100%),
);
@each $name in $break-names {
	@include mediaQ($name, $break-map-small) {
		@each $classSuffix, $size in map.get($grid-widths, $name) {
			.col-#{$classSuffix}_#{$name} { width: $size}
		}
	}
}

@include mediaQ(md) {
	.container {
		padding-left: $content-padding-2;
		padding-right: $content-padding-2;
	}
}

@include mediaQ(xl) {
	.container-wide {
		max-width: 1500px;
		padding-left: 0;
		padding-right: 0;
	}

	.container-wide-expand {
		margin-left: -10rem;
		margin-right: -10rem;
	}
}