.grid,
.inline-grid {
	--gap-x: 2rem;
	--gap-y: 2rem;
	grid-template-columns: 1fr;
	column-gap: var(--gap-x);
	row-gap: var(--gap-y);
}

.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;
}
.row-span-5 {
	grid-row: span 5 / span 5;
}

@media (max-width: 767px) {
	.grid.mobile\:reverse > :last-child {
		order: 1;
	}

	.grid.mobile\:reverse > :first-child,
	.grid.mobile\:reverse:has(> :nth-child(3)) > :nth-child(2) {
		order: 2;
	}

	.grid.mobile\:reverse:has(> :nth-child(3)) > :first-child {
		order: 3;
	}
	
}

@media (min-width: 576px) {
	.grid {
		--gap-x: 2.5rem;
		--gap-y: 2.5rem;
	}

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

	.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-x: 3rem;
		--gap-y: 3rem;
	}

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

	.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-x: 3.5rem;
		--gap-y: 3.5rem;
	}

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

	.offset-2-1 {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}

	.offset-1-2 {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	}

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

	.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;
	}
}

@media (min-width: 1280px) {
	.grid {
		--gap-x: 4rem;
		--gap-y: 4rem;
	}

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

	.offset-3-1 {
		grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
	}

	.offset-1-3 {
		grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
	}

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

	.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-x: 5rem;
		--gap-y: 5rem;
	}

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

	.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;
	}
}