/*--------------------------------------------------------------
# Grid
--------------------------------------------------------------*/

/* Internal containers. */
.fluid-container,
.inner-container {
	margin-right: auto;
	margin-left: auto;
	padding-left: var(--spacer-4);
	padding-right: var(--spacer-4);
	width: 100%;
}

@media (--sm) {

	.fluid-container {
		max-width: calc(100% - 4rem);
	}

	.inner-container {
		max-width: var(--content-width);
	}
}

/* Grid. */
.flex-grid {
	margin: 0 auto;
	padding-left: var(--spacer-2);
	padding-right: var(--spacer-2);
}

.row {
	display: flex;
	flex-wrap: wrap;
	margin-left: -0.5rem;
	margin-right: -0.5rem;
}

.col {
	padding: 0 0.5rem;
}

.row::after {
	content: "";
	clear: both;
	display: table;
}

@media only screen {

	.col {
		float: left;
		width: 100%;
	}
}

/* Grid columns. */
.full {
	width: 100%;
}

.half {
	width: 50%;
}

.one-thirds {
	width: 33.33%;
}

.two-thirds {
	width: 66.66%;
}

.one-quarters {
	width: 25%;
}

.two-quarters {
	width: 50%;
}

.three-quarters {
	width: 75%;
}

.one-fifths {
	width: 20%;
}

.two-fifths {
	width: 40%;
}

.three-fifths {
	width: 60%;
}

.four-fifths {
	width: 80%;
}

.seven-twelfths {
	width: 58.33%;
}

.five-twelfths {
	width: 41.66%;
}

.one-tenths {
	width: 10%;
}

.nine-tenths {
	width: 90%;
}

/* Grid columns for each breakpoint. */
@each $size in sm, md, lg, xl {
@media (--$(size)) {
	.full-$(size) {
		width: 100%;
	}
	
	.half-$(size) {
		width: 50%;
	}
	
	.one-thirds-$(size) {
		width: 33.33%;
	}
	
	.two-thirds-$(size) {
		width: 66.66%;
	}
	
	.one-quarters-$(size) {
		width: 25%;
	}
	
	.two-quarters-$(size) {
		width: 50%;
	}
	
	.three-quarters-$(size) {
		width: 75%;
	}
	
	.one-fifths-$(size) {
		width: 20%;
	}
	
	.two-fifths-$(size) {
		width: 40%;
	}
	
	.three-fifths-$(size) {
		width: 60%;
	}
	
	.four-fifths-$(size) {
		width: 80%;
	}
	
	.seven-twelfths-$(size) {
		width: 58.33%;
	}
	
	.five-twelfths-$(size) {
		width: 41.66%;
	}
	
	.one-tenths-$(size) {
		width: 10%;
	}

	.nine-tenths-$(size) {
		width: 90%;
	}
}
}