/** @format */

.grid {
	display: grid;
	gap: calc(var(--universal-gap) * 2) calc(var(--universal-gap) / 2);
}

.grid--12 {
	grid-template-columns: [row-1-start] 1fr 1fr 1fr 1fr 1fr 1fr [row-1-end] 1fr [row-2-start] 1fr 1fr 1fr 1fr 1fr [row-2-end];
}

.grid--4 {
	grid-template-columns: [row-1-start] 1fr [row-1-end row-2-start] 1fr [row-2-end row-3-start] 1fr [row-3-end row-4-start] 1fr [row-4-end];
}

.grid--2 {
	grid-template-columns: [row-1-start] 1fr [row-1-end row-2-start] 1fr [row-2-end];
	column-gap: calc(var(--universal-gap) * 2);
}

.grid--auto-200px {
	grid-template-columns: repeat(auto-fit, minmax(200px, 2fr));
}

@media (max-width: 1200px) {
	.grid--4 {
		grid-template-columns: [row-1-start] 1fr [row-1-end row-2-start] 1fr [row-2-end];
	}
}
@media (max-width: 600px) {
	.grid--4 {
		grid-template-columns: [row-1-start] 1fr [row-2-end];
	}
}

@media (max-width: 1200px) {
	.grid--4 {
		grid-template-columns: [row-1-start] 1fr [row-1-end row-2-start] 1fr [row-2-end];
	}
}
@media (max-width: 600px) {
	.grid--4 {
		grid-template-columns: [row-1-start] 1fr [row-2-end];
	}
}

.grid--3 {
	grid-template-columns: [row-1-start] 1fr [row-1-end row-2-start] 1fr [row-2-end row-3-start] 1fr [row-3-end];
}

.grid-item {
}

.grid-item--1 {
	grid-column: row-1-start / row-1-end;
}

.grid-item--2 {
	grid-column: row-2-start / row-2-end;
}

@media (max-width: 1050px) {
	.grid-item--1,
	.grid-item--2 {
		grid-column: row-1-start / row-2-end;
	}
}

.grid-item--full {
	grid-column: row-1-start / row-2-end;
}