/* Simple Grid */
:root {
	/* Gaps (configurable, requires units) */
	--gap-h: 0rem;
	--gap-v: 0.5rem;

	/* Column percentage widths */
	--c-1: 8.3333333333%;
	--c-2: 16.6666666667%;
	--c-3: 25%;
	--c-4: 33.3333333333%;
	--c-5: 41.6666666667%;
	--c-6: 50%;
	--c-7: 58.3333333333%;
	--c-8: 66.6666666667%;
	--c-9: 75%;
	--c-10: 83.3333333333%;
	--c-11: 91.6666666667%;
	--c-12: 100%;

	/* Margins for gutters */
	--m-1: calc(var(--c-1) + var(--gap-h));
	--m-2: calc(var(--c-2) + var(--gap-h));
	--m-3: calc(var(--c-3) + var(--gap-h));
	--m-4: calc(var(--c-4) + var(--gap-h));
	--m-5: calc(var(--c-5) + var(--gap-h));
	--m-6: calc(var(--c-6) + var(--gap-h));
	--m-7: calc(var(--c-7) + var(--gap-h));
	--m-8: calc(var(--c-8) + var(--gap-h));
	--m-9: calc(var(--c-9) + var(--gap-h));
	--m-10: calc(var(--c-10) + var(--gap-h));
	--m-11: calc(var(--c-11) + var(--gap-h));

	/* Widths (minus margin each side) */
	--m-h: 2 * var(--gap-h);
	--w-1: calc(var(--c-1) - var(--m-h));
	--w-2: calc(var(--c-2) - var(--m-h));
	--w-3: calc(var(--c-3) - var(--m-h));
	--w-4: calc(var(--c-4) - var(--m-h));
	--w-5: calc(var(--c-5) - var(--m-h));
	--w-6: calc(var(--c-6) - var(--m-h));
	--w-7: calc(var(--c-7) - var(--m-h));
	--w-8: calc(var(--c-8) - var(--m-h));
	--w-9: calc(var(--c-9) - var(--m-h));
	--w-10: calc(var(--c-10) - var(--m-h));
	--w-11: calc(var(--c-11) - var(--m-h));
	--w-12: calc(var(--c-12) - var(--m-h));
}
.container {
	overflow-x: hidden;
}
/* Not really a ROW, but still */
.row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 calc(-1 * var(--gap-h));  /* Hack to remove side margins */
	text-align: center;
}
.col,
[class^="col-"],
[class*=" col-"] {
	border: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	margin: var(--gap-v) var(--gap-h);
	padding: 0;
	text-align: left;
	vertical-align: top;
	width: var(--w-12);
}

/* Column Widths */
.col-1 { width: var(--w-1) }
.col-2 { width: var(--w-2) }
.col-3 { width: var(--w-3) }
.col-4 { width: var(--w-4) }
.col-5 { width: var(--w-5) }
.col-6 { width: var(--w-6) }
.col-7 { width: var(--w-7) }
.col-8 { width: var(--w-8) }
.col-9 { width: var(--w-9) }
.col-10 { width: var(--w-10) }
.col-11 { width: var(--w-11) }

/* Gutter Left */
.gl-1 { margin-left: var(--m-1) }
.gl-2 { margin-left: var(--m-2) }
.gl-3 { margin-left: var(--m-3) }
.gl-4 { margin-left: var(--m-4) }
.gl-5 { margin-left: var(--m-5) }
.gl-6 { margin-left: var(--m-6) }
.gl-7 { margin-left: var(--m-7) }
.gl-8 { margin-left: var(--m-8) }
.gl-9 { margin-left: var(--m-9) }
.gl-10 { margin-left: var(--m-10) }
.gl-11 { margin-left: var(--m-11) }

/* Gutter Right */
.gr-1 { margin-right: var(--m-1) }
.gr-2 { margin-right: var(--m-2) }
.gr-3 { margin-right: var(--m-3) }
.gr-4 { margin-right: var(--m-4) }
.gr-5 { margin-right: var(--m-5) }
.gr-6 { margin-right: var(--m-6) }
.gr-7 { margin-right: var(--m-7) }
.gr-8 { margin-right: var(--m-8) }
.gr-9 { margin-right: var(--m-9) }
.gr-10 { margin-right: var(--m-10) }
.gr-11 { margin-right: var(--m-11) }
@media (min-width: 480px) {
	.col-xs-1 { width: var(--w-1) }
	.col-xs-2 { width: var(--w-2) }
	.col-xs-3 { width: var(--w-3) }
	.col-xs-4 { width: var(--w-4) }
	.col-xs-5 { width: var(--w-5) }
	.col-xs-6 { width: var(--w-6) }
	.col-xs-7 { width: var(--w-7) }
	.col-xs-8 { width: var(--w-8) }
	.col-xs-9 { width: var(--w-9) }
	.col-xs-10 { width: var(--w-10) }
	.col-xs-11 { width: var(--w-11) }
	.col-xs-12 { width: var(--w-12) }
	.gl-xs-1 { margin-left: var(--m-1) }
	.gl-xs-2 { margin-left: var(--m-2) }
	.gl-xs-3 { margin-left: var(--m-3) }
	.gl-xs-4 { margin-left: var(--m-4) }
	.gl-xs-5 { margin-left: var(--m-5) }
	.gl-xs-6 { margin-left: var(--m-6) }
	.gl-xs-7 { margin-left: var(--m-7) }
	.gl-xs-8 { margin-left: var(--m-8) }
	.gl-xs-9 { margin-left: var(--m-9) }
	.gl-xs-10 { margin-left: var(--m-10) }
	.gl-xs-11 { margin-left: var(--m-11) }
	.gr-xs-1 { margin-right: var(--m-1) }
	.gr-xs-2 { margin-right: var(--m-2) }
	.gr-xs-3 { margin-right: var(--m-3) }
	.gr-xs-4 { margin-right: var(--m-4) }
	.gr-xs-5 { margin-right: var(--m-5) }
	.gr-xs-6 { margin-right: var(--m-6) }
	.gr-xs-7 { margin-right: var(--m-7) }
	.gr-xs-8 { margin-right: var(--m-8) }
	.gr-xs-9 { margin-right: var(--m-9) }
	.gr-xs-10 { margin-right: var(--m-10) }
	.gr-xs-11 { margin-right: var(--m-11) }
}
@media (min-width: 576px) {
	.col-sm-1 { width: var(--w-1) }
	.col-sm-2 { width: var(--w-2) }
	.col-sm-3 { width: var(--w-3) }
	.col-sm-4 { width: var(--w-4) }
	.col-sm-5 { width: var(--w-5) }
	.col-sm-6 { width: var(--w-6) }
	.col-sm-7 { width: var(--w-7) }
	.col-sm-8 { width: var(--w-8) }
	.col-sm-9 { width: var(--w-9) }
	.col-sm-10 { width: var(--w-10) }
	.col-sm-11 { width: var(--w-11) }
	.col-sm-12 { width: var(--w-12) }
	.gl-sm-1 { margin-left: var(--m-1) }
	.gl-sm-2 { margin-left: var(--m-2) }
	.gl-sm-3 { margin-left: var(--m-3) }
	.gl-sm-4 { margin-left: var(--m-4) }
	.gl-sm-5 { margin-left: var(--m-5) }
	.gl-sm-6 { margin-left: var(--m-6) }
	.gl-sm-7 { margin-left: var(--m-7) }
	.gl-sm-8 { margin-left: var(--m-8) }
	.gl-sm-9 { margin-left: var(--m-9) }
	.gl-sm-10 { margin-left: var(--m-10) }
	.gl-sm-11 { margin-left: var(--m-11) }
	.gr-sm-1 { margin-right: var(--m-1) }
	.gr-sm-2 { margin-right: var(--m-2) }
	.gr-sm-3 { margin-right: var(--m-3) }
	.gr-sm-4 { margin-right: var(--m-4) }
	.gr-sm-5 { margin-right: var(--m-5) }
	.gr-sm-6 { margin-right: var(--m-6) }
	.gr-sm-7 { margin-right: var(--m-7) }
	.gr-sm-8 { margin-right: var(--m-8) }
	.gr-sm-9 { margin-right: var(--m-9) }
	.gr-sm-10 { margin-right: var(--m-10) }
	.gr-sm-11 { margin-right: var(--m-11) }
}
@media (min-width: 768px) {
	.col-md-1 { width: var(--w-1) }
	.col-md-2 { width: var(--w-2) }
	.col-md-3 { width: var(--w-3) }
	.col-md-4 { width: var(--w-4) }
	.col-md-5 { width: var(--w-5) }
	.col-md-6 { width: var(--w-6) }
	.col-md-7 { width: var(--w-7) }
	.col-md-8 { width: var(--w-8) }
	.col-md-9 { width: var(--w-9) }
	.col-md-10 { width: var(--w-10) }
	.col-md-11 { width: var(--w-11) }
	.col-md-12 { width: var(--w-12) }
	.gl-md-1 { margin-left: var(--m-1) }
	.gl-md-2 { margin-left: var(--m-2) }
	.gl-md-3 { margin-left: var(--m-3) }
	.gl-md-4 { margin-left: var(--m-4) }
	.gl-md-5 { margin-left: var(--m-5) }
	.gl-md-6 { margin-left: var(--m-6) }
	.gl-md-7 { margin-left: var(--m-7) }
	.gl-md-8 { margin-left: var(--m-8) }
	.gl-md-9 { margin-left: var(--m-9) }
	.gl-md-10 { margin-left: var(--m-10) }
	.gl-md-11 { margin-left: var(--m-11) }
	.gr-md-1 { margin-right: var(--m-1) }
	.gr-md-2 { margin-right: var(--m-2) }
	.gr-md-3 { margin-right: var(--m-3) }
	.gr-md-4 { margin-right: var(--m-4) }
	.gr-md-5 { margin-right: var(--m-5) }
	.gr-md-6 { margin-right: var(--m-6) }
	.gr-md-7 { margin-right: var(--m-7) }
	.gr-md-8 { margin-right: var(--m-8) }
	.gr-md-9 { margin-right: var(--m-9) }
	.gr-md-10 { margin-right: var(--m-10) }
	.gr-md-11 { margin-right: var(--m-11) }
}
@media (min-width: 992px) {
	.col-lg-1 { width: var(--w-1) }
	.col-lg-2 { width: var(--w-2) }
	.col-lg-3 { width: var(--w-3) }
	.col-lg-4 { width: var(--w-4) }
	.col-lg-5 { width: var(--w-5) }
	.col-lg-6 { width: var(--w-6) }
	.col-lg-7 { width: var(--w-7) }
	.col-lg-8 { width: var(--w-8) }
	.col-lg-9 { width: var(--w-9) }
	.col-lg-10 { width: var(--w-10) }
	.col-lg-11 { width: var(--w-11) }
	.col-lg-12 { width: var(--w-12) }
	.gl-lg-1 { margin-left: var(--m-1) }
	.gl-lg-2 { margin-left: var(--m-2) }
	.gl-lg-3 { margin-left: var(--m-3) }
	.gl-lg-4 { margin-left: var(--m-4) }
	.gl-lg-5 { margin-left: var(--m-5) }
	.gl-lg-6 { margin-left: var(--m-6) }
	.gl-lg-7 { margin-left: var(--m-7) }
	.gl-lg-8 { margin-left: var(--m-8) }
	.gl-lg-9 { margin-left: var(--m-9) }
	.gl-lg-10 { margin-left: var(--m-10) }
	.gl-lg-11 { margin-left: var(--m-11) }
	.gr-lg-1 { margin-right: var(--m-1) }
	.gr-lg-2 { margin-right: var(--m-2) }
	.gr-lg-3 { margin-right: var(--m-3) }
	.gr-lg-4 { margin-right: var(--m-4) }
	.gr-lg-5 { margin-right: var(--m-5) }
	.gr-lg-6 { margin-right: var(--m-6) }
	.gr-lg-7 { margin-right: var(--m-7) }
	.gr-lg-8 { margin-right: var(--m-8) }
	.gr-lg-9 { margin-right: var(--m-9) }
	.gr-lg-10 { margin-right: var(--m-10) }
	.gr-lg-11 { margin-right: var(--m-11) }
}
@media (min-width: 1200px) {
	.col-xl-1 { width: var(--w-1) }
	.col-xl-2 { width: var(--w-2) }
	.col-xl-3 { width: var(--w-3) }
	.col-xl-4 { width: var(--w-4) }
	.col-xl-5 { width: var(--w-5) }
	.col-xl-6 { width: var(--w-6) }
	.col-xl-7 { width: var(--w-7) }
	.col-xl-8 { width: var(--w-8) }
	.col-xl-9 { width: var(--w-9) }
	.col-xl-10 { width: var(--w-10) }
	.col-xl-11 { width: var(--w-11) }
	.col-xl-12 { width: var(--w-12) }
	.gl-xl-1 { margin-left: var(--m-1) }
	.gl-xl-2 { margin-left: var(--m-2) }
	.gl-xl-3 { margin-left: var(--m-3) }
	.gl-xl-4 { margin-left: var(--m-4) }
	.gl-xl-5 { margin-left: var(--m-5) }
	.gl-xl-6 { margin-left: var(--m-6) }
	.gl-xl-7 { margin-left: var(--m-7) }
	.gl-xl-8 { margin-left: var(--m-8) }
	.gl-xl-9 { margin-left: var(--m-9) }
	.gl-xl-10 { margin-left: var(--m-10) }
	.gl-xl-11 { margin-left: var(--m-11) }
	.gr-xl-1 { margin-right: var(--m-1) }
	.gr-xl-2 { margin-right: var(--m-2) }
	.gr-xl-3 { margin-right: var(--m-3) }
	.gr-xl-4 { margin-right: var(--m-4) }
	.gr-xl-5 { margin-right: var(--m-5) }
	.gr-xl-6 { margin-right: var(--m-6) }
	.gr-xl-7 { margin-right: var(--m-7) }
	.gr-xl-8 { margin-right: var(--m-8) }
	.gr-xl-9 { margin-right: var(--m-9) }
	.gr-xl-10 { margin-right: var(--m-10) }
	.gr-xl-11 { margin-right: var(--m-11) }
}
@media (min-width: 1400px) {
	.col-xxl-1 { width: var(--w-1) }
	.col-xxl-2 { width: var(--w-2) }
	.col-xxl-3 { width: var(--w-3) }
	.col-xxl-4 { width: var(--w-4) }
	.col-xxl-5 { width: var(--w-5) }
	.col-xxl-6 { width: var(--w-6) }
	.col-xxl-7 { width: var(--w-7) }
	.col-xxl-8 { width: var(--w-8) }
	.col-xxl-9 { width: var(--w-9) }
	.col-xxl-10 { width: var(--w-10) }
	.col-xxl-11 { width: var(--w-11) }
	.col-xxl-12 { width: var(--w-12) }
	.gl-xxl-1 { margin-left: var(--m-1) }
	.gl-xxl-2 { margin-left: var(--m-2) }
	.gl-xxl-3 { margin-left: var(--m-3) }
	.gl-xxl-4 { margin-left: var(--m-4) }
	.gl-xxl-5 { margin-left: var(--m-5) }
	.gl-xxl-6 { margin-left: var(--m-6) }
	.gl-xxl-7 { margin-left: var(--m-7) }
	.gl-xxl-8 { margin-left: var(--m-8) }
	.gl-xxl-9 { margin-left: var(--m-9) }
	.gl-xxl-10 { margin-left: var(--m-10) }
	.gl-xxl-11 { margin-left: var(--m-11) }
	.gr-xxl-1 { margin-right: var(--m-1) }
	.gr-xxl-2 { margin-right: var(--m-2) }
	.gr-xxl-3 { margin-right: var(--m-3) }
	.gr-xxl-4 { margin-right: var(--m-4) }
	.gr-xxl-5 { margin-right: var(--m-5) }
	.gr-xxl-6 { margin-right: var(--m-6) }
	.gr-xxl-7 { margin-right: var(--m-7) }
	.gr-xxl-8 { margin-right: var(--m-8) }
	.gr-xxl-9 { margin-right: var(--m-9) }
	.gr-xxl-10 { margin-right: var(--m-10) }
	.gr-xxl-11 { margin-right: var(--m-11) }
}