.grid-container {
	width: min(100% - (2 * var(--container-gutter)), var(--container-width));
	margin-inline: auto;
}

.grid-container-full {
	width: 100%;
}

.grid-parent {
	display: flex;
	flex-wrap: wrap;
}

.grid-20 { width: 20%; }
.grid-25 { width: 25%; }
.grid-33 { width: 33.3333%; }
.grid-40 { width: 40%; }
.grid-50 { width: 50%; }
.grid-55 { width: 55%; }
.grid-60 { width: 60%; }
.grid-66 { width: 66.6667%; }
.grid-75 { width: 75%; }
.grid-80 { width: 80%; }
.grid-100 { width: 100%; }

.prefix-10 { margin-left: 10%; }
.prefix-20 { margin-left: 20%; }
.suffix-5 { margin-right: 5%; }
.suffix-10 { margin-right: 10%; }
.suffix-20 { margin-right: 20%; }

.position-relative { position: relative; }
.position-absolute { position: absolute; }
.z-index-3 { z-index: 3; }
.z-index-4 { z-index: 4; }
.text-align-center { text-align: center; }

@media (min-width: 48.001rem) and (max-width: 64rem) {
	.tablet-grid-40 { width: 40%; }
	.tablet-grid-50 { width: 50%; }
	.tablet-grid-55 { width: 55%; }
	.tablet-grid-80 { width: 80%; }
	.tablet-grid-100 { width: 100%; }
	.tablet-prefix-10 { margin-left: 10%; }
	.tablet-suffix-5 { margin-right: 5%; }
	.tablet-suffix-10 { margin-right: 10%; }
}

@media (max-width: 48rem) {
	.mobile-grid-100 {
		width: 100%;
		margin-inline: 0;
	}
}