.grid,
.inline-grid {
	--gap: 2rem;
	--gap-compact: 1.5rem;
	--gap-comfortable: 2rem;
	grid-template-columns: 1fr;
	gap: var(--gap);
}

.grid {
	display: grid;
}

.inline-grid {
	display: inline-grid;
}

.cols-auto {
	grid-auto-flow: column;
	grid-auto-rows: max-content;
}

.rows-auto {
	grid-auto-flow: row;
	grid-auto-columns: max-content;
}

.col-span-auto {
	grid-column: auto;
}
.col-span-full {
	grid-column: 1 / -1;
}
.col-span-1 {
	grid-column: span 1 / span 1;
}
.col-span-2 {
	grid-column: span 2 / span 2;
}
.col-span-3 {
	grid-column: span 3 / span 3;
}
.col-span-4 {
	grid-column: span 4 / span 4;
}
.col-span-5 {
	grid-column: span 5 / span 5;
}

.row-span-auto {
	grid-row: auto;
}
.row-span-full {
	grid-row: 1 / -1;
}
.row-span-1 {
	grid-row: span 1 / span 1;
}
.row-span-2 {
	grid-row: span 2 / span 2;
}
.row-span-3 {
	grid-row: span 3 / span 3;
}
.row-span-4 {
	grid-row: span 4 / span 4;
}

@media (min-width: 576px) {
	.grid {
		--gap: 2.5rem;
		--gap-compact: 1.5rem;
		--gap-comfortable: 3rem;
	}

	.sm\:cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--gap-comfortable);
	}
	.sm\:cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--gap);
	}
	.sm\:cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--gap);
	}
	.sm\:cols-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: var(--gap-compact);
	}

	.sm\:col-span-auto {
		grid-column: auto;
	}
	.sm\:col-span-full {
		grid-column: 1 / -1;
	}
	.sm\:col-span-1 {
		grid-column: span 1 / span 1;
	}
	.sm\:col-span-2 {
		grid-column: span 2 / span 2;
	}
	.sm\:col-span-3 {
		grid-column: span 3 / span 3;
	}
	.sm\:col-span-4 {
		grid-column: span 4 / span 4;
	}
	.sm\:col-span-5 {
		grid-column: span 5 / span 5;
	}
}

@media (min-width: 768px) {
	.grid {
		--gap: 3rem;
		--gap-compact: 1.5rem;
		--gap-comfortable: 4rem;
	}

	.cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--gap-comfortable);
	}
	.cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--gap-comfortable);
	}
	.md\:cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--gap-comfortable);
	}
	.md\:cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--gap);
	}
	.md\:cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--gap);
	}
	.md\:cols-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: var(--gap-compact);
	}

	.md\:col-span-auto {
		grid-column: auto;
	}
	.md\:col-span-full {
		grid-column: 1 / -1;
	}
	.md\:col-span-1 {
		grid-column: span 1 / span 1;
	}
	.md\:col-span-2 {
		grid-column: span 2 / span 2;
	}
	.md\:col-span-3 {
		grid-column: span 3 / span 3;
	}
	.md\:col-span-4 {
		grid-column: span 4 / span 4;
	}
	.md\:col-span-5 {
		grid-column: span 5 / span 5;
	}
}

@media (min-width: 1024px) {
	.grid {
		--gap: 3.5rem;
		--gap-compact: 2rem;
		--gap-comfortable: 5rem;
	}

	.cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--gap);
	}
	.lg\:cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--gap-comfortable);
	}
	.lg\:cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--gap);
	}
	.lg\:cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--gap);
	}
	.lg\:cols-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: var(--gap-compact);
	}

	.lg\:col-span-auto {
		grid-column: auto;
	}
	.lg\:col-span-full {
		grid-column: 1 / -1;
	}
	.lg\:col-span-1 {
		grid-column: span 1 / span 1;
	}
	.lg\:col-span-2 {
		grid-column: span 2 / span 2;
	}
	.lg\:col-span-3 {
		grid-column: span 3 / span 3;
	}
	.lg\:col-span-4 {
		grid-column: span 4 / span 4;
	}
	.lg\:col-span-5 {
		grid-column: span 5 / span 5;
	}

	.cols-3.offset-1-2 > :not([class*='col-span']):nth-child(2n) {
		grid-column: span 2 / span 2;
	}

	.cols-3.offset-2-1 > :not([class*='col-span']):nth-child(2n-1) {
		grid-column: span 2 / span 2;
	}
}

@media (min-width: 1280px) {
	.grid {
		--gap: 3.5rem;
		--gap-compact: 2.5rem;
		--gap-comfortable: 6rem;
	}

	.cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--gap);
	}

	.cols-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: var(--gap-compact);
	}

	.cols-4.offset-1-3 > :not([class*='col-span']):nth-child(2n) {
		grid-column: span 3 / span 3;
	}

	.cols-4.offset-3-1 > :not([class*='col-span']):nth-child(2n-1) {
		grid-column: span 3 / span 3;
	}

	.xl\:cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--gap-comfortable);
	}
	.xl\:cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--gap);
	}
	.xl\:cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--gap);
	}
	.xl\:cols-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: var(--gap-compact);
	}

	.xl\:col-span-auto {
		grid-column: auto;
	}
	.xl\:col-span-full {
		grid-column: 1 / -1;
	}
	.xl\:col-span-1 {
		grid-column: span 1 / span 1;
	}
	.xl\:col-span-2 {
		grid-column: span 2 / span 2;
	}
	.xl\:col-span-3 {
		grid-column: span 3 / span 3;
	}
	.xl\:col-span-4 {
		grid-column: span 4 / span 4;
	}
	.xl\:col-span-5 {
		grid-column: span 5 / span 5;
	}
}

@media (min-width: 1540px) {
	.grid {
		--gap: 3.5rem;
		--gap-compact: 3rem;
		--gap-comfortable: 7rem;
	}

	.xxl\:cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--gap-comfortable);
	}
	.xxl\:cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--gap);
	}
	.xxl\:cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--gap);
	}
	.xxl\:cols-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: var(--gap-compact);
	}

	.xxl\:col-span-auto {
		grid-column: auto;
	}
	.xxl\:col-span-full {
		grid-column: 1 / -1;
	}
	.xxl\:col-span-1 {
		grid-column: span 1 / span 1;
	}
	.xxl\:col-span-2 {
		grid-column: span 2 / span 2;
	}
	.xxl\:col-span-3 {
		grid-column: span 3 / span 3;
	}
	.xxl\:col-span-4 {
		grid-column: span 4 / span 4;
	}
	.xxl\:col-span-5 {
		grid-column: span 5 / span 5;
	}
}