/* This grid is a very generic grid, the grid doesn't have to be on every elements of your design. */

/* This is only necessary with gutters */

.grid {
	overflow:hidden;
}

.row {
	display:flex;
	flex-wrap:wrap;
}
.gutters {
	--gutter-size:10px;
	margin-top:calc(-2 * var(--gutter-size));
	margin-left:calc(-1 * var(--gutter-size));
	margin-right:calc(-1 * var(--gutter-size));
}
.gutters.large {
	--gutter-size:20px;
}
.gutters.small {
	--gutter-size:5px;
}

[class*='col-'] {
	flex:0 0 auto;
}
.gutters>[class*='col-'] {
	margin-top:calc(2 * var(--gutter-size));
	padding-left:var(--gutter-size);
	padding-right:var(--gutter-size);
}

.col-sm-1 { width: calc((1/12) * 100%); }
.col-sm-2 { width: calc((2/12) * 100%); }
.col-sm-3 { width: calc((3/12) * 100%); }
.col-sm-4 { width: calc((4/12) * 100%); }
.col-sm-5 { width: calc((5/12) * 100%); }
.col-sm-6 { width: calc((6/12) * 100%); }
.col-sm-7 { width: calc((7/12) * 100%); }
.col-sm-8 { width: calc((8/12) * 100%); }
.col-sm-9 { width: calc((9/12) * 100%); }
.col-sm-10 { width: calc((10/12) * 100%); }
.col-sm-11 { width: calc((11/12) * 100%); }
.col-sm-12 { width: calc((12/12) * 100%); }

/* Medium Breakpoint */
@media (min-width:600px) {
	.col-md-1 { width: calc((1/12) * 100%); }
	.col-md-2 { width: calc((2/12) * 100%); }
	.col-md-3 { width: calc((3/12) * 100%); }
	.col-md-4 { width: calc((4/12) * 100%); }
	.col-md-5 { width: calc((5/12) * 100%); }
	.col-md-6 { width: calc((6/12) * 100%); }
	.col-md-7 { width: calc((7/12) * 100%); }
	.col-md-8 { width: calc((8/12) * 100%); }
	.col-md-9 { width: calc((9/12) * 100%); }
	.col-md-10 { width: calc((10/12) * 100%); }
	.col-md-11 { width: calc((11/12) * 100%); }
	.col-md-12 { width: calc((12/12) * 100%); }
}

/* Large Breakpoint */
@media (min-width:900px) {
	.col-lg-1 { width: calc((1/12) * 100%); }
	.col-lg-2 { width: calc((2/12) * 100%); }
	.col-lg-3 { width: calc((3/12) * 100%); }
	.col-lg-4 { width: calc((4/12) * 100%); }
	.col-lg-5 { width: calc((5/12) * 100%); }
	.col-lg-6 { width: calc((6/12) * 100%); }
	.col-lg-7 { width: calc((7/12) * 100%); }
	.col-lg-8 { width: calc((8/12) * 100%); }
	.col-lg-9 { width: calc((9/12) * 100%); }
	.col-lg-10 { width: calc((10/12) * 100%); }
	.col-lg-11 { width: calc((11/12) * 100%); }
	.col-lg-12 { width: calc((12/12) * 100%); }
}

/* Extra-Large Breakpoint */
@media (min-width:1200px) {
	.col-xl-1 { width: calc((1/12) * 100%); }
	.col-xl-2 { width: calc((2/12) * 100%); }
	.col-xl-3 { width: calc((3/12) * 100%); }
	.col-xl-4 { width: calc((4/12) * 100%); }
	.col-xl-5 { width: calc((5/12) * 100%); }
	.col-xl-6 { width: calc((6/12) * 100%); }
	.col-xl-7 { width: calc((7/12) * 100%); }
	.col-xl-8 { width: calc((8/12) * 100%); }
	.col-xl-9 { width: calc((9/12) * 100%); }
	.col-xl-10 { width: calc((10/12) * 100%); }
	.col-xl-11 { width: calc((11/12) * 100%); }
	.col-xl-12 { width: calc((12/12) * 100%); }
}