.grid-row {
    display: flex;
    flex-wrap: wrap;
	justify-content: space-between;

	&.grid-with-gap {
		--gap: 1em;

		& .grid-col,
		& [class^="grid-col-"],
		& [class*=" grid-col-"] {
			box-sizing: border-box;
			
			&:not(:last-of-type) {
				padding-right: calc(var(--gap) / 2);
			}

			&:not(:first-of-type) {
				padding-left: calc(var(--gap) / 2);
			}
		}
	}
}

.grid-col {
    flex: 1 0 0%;
}

[class^="grid-col-"] {
	flex: 0 0 auto;
}

.grid-col-auto {
    width: auto;
}

.grid-col-1 {
	width: 10%;
}

.grid-col-2 {
	width: 20%;
}

.grid-col-3 {
	width: 30%;
}

.grid-col-4 {
	width: 40%;
}

.grid-col-5 {
	width: 50%;
}

.grid-col-6 {
	width: 60%;
}

.grid-col-7 {
	width: 70%;
}

.grid-col-8 {
	width: 80%;
}

.grid-col-9 {
	width: 90%;
}

.grid-col-10 {
	width: 100%;
}

@media (min-width: 768px) {
	.grid-col-md {
		flex: 1 0 0%;
	}
	
	.grid-col-md-auto {
		width: auto;
	}

	.grid-col-md-1 {
		width: 10%;
	}

	.grid-col-md-2 {
		width: 20%;
	}

	.grid-col-md-3 {
		width: 30%;
	}

	.grid-col-md-4 {
		width: 40%;
	}

	.grid-col-md-5 {
		width: 50%;
	}

	.grid-col-md-6 {
		width: 60%;
	}

	.grid-col-md-7 {
		width: 70%;
	}

	.grid-col-md-8 {
		width: 80%;
	}

	.grid-col-md-9 {
		width: 90%;
	}

	.grid-col-md-10 {
		width: 100%;
	}
}

@media (min-width: 960px) {
	.grid-col-lg {
		flex: 1 0 0%;
	}
	
	.grid-col-lg-auto {
		width: auto;
	}

	.grid-col-lg-1 {
		width: 10%;
	}

	.grid-col-lg-2 {
		width: 20%;
	}

	.grid-col-lg-3 {
		width: 30%;
	}

	.grid-col-lg-4 {
		width: 40%;
	}

	.grid-col-lg-5 {
		width: 50%;
	}

	.grid-col-lg-6 {
		width: 60%;
	}

	.grid-col-lg-7 {
		width: 70%;
	}

	.grid-col-lg-8 {
		width: 80%;
	}

	.grid-col-lg-9 {
		width: 90%;
	}

	.grid-col-lg-10 {
		width: 100%;
	}
}