:root {
	--gutter-size: 2em;
}

.grid {
	/*overflow:hidden;*/
}

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

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



@media (min-width: 320px) {
.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%);}
}