:root {
	--grid-columns: 12;
	--grid-gutter: 2rem;
	--grid-margin: 2rem;
	--grid-max-width: 88rem;
}

@media (min-width: 1900px) {
	:root {
		--grid-gutter: 1.5rem;
	}
}

@media (max-width: 1199.98px) {
	:root {
		--grid-gutter: 0.75rem;
		--grid-margin: 5.5rem;
	}
}

@media (max-width: 850px) {
	:root {
		--grid-margin: 2.5rem;
	}
}

@media (max-width: 767.98px) {
	:root {
		--grid-columns: 6;
		--grid-gutter: 0.5rem;
		--grid-margin: 1.5rem;
	}
}

.themeGrid {
	display: grid;
	grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
	gap: var(--grid-gutter);
	box-sizing: content-box;
	max-width: var(--grid-max-width);
	margin-inline: auto;
	padding-inline: var(--grid-margin);
}

.grid-span-1 {
	grid-column: span 1;
}
.grid-span-2 {
	grid-column: span 2;
}
.grid-span-3 {
	grid-column: span 3;
}
.grid-span-4 {
	grid-column: span 4;
}
.grid-span-5 {
	grid-column: span 5;
}
.grid-span-6 {
	grid-column: span 6;
}
.grid-span-7 {
	grid-column: span 7;
}
.grid-span-8 {
	grid-column: span 8;
}
.grid-span-9 {
	grid-column: span 9;
}
.grid-span-10 {
	grid-column: span 10;
}
.grid-span-11 {
	grid-column: span 11;
}
.grid-span-12 {
	grid-column: span 12;
}

@media (max-width: 767.98px) {
	.grid-span-7,
	.grid-span-8,
	.grid-span-9,
	.grid-span-10,
	.grid-span-11,
	.grid-span-12 {
		grid-column: span 6;
	}
}