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


.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): ( 50:50%),
	list.nth($break-names, 2): ( 25:25%, 33:33.33%, 50:50%, 66:66.667%, 75:75%, 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}
		}
	}
}