/* --------------------------------------------|
|                                              |
| NO PREFIXES!!!                               |
|                                              |
|-------------------------------------------- */

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--padding-secondary-horizontal-px);
}

.grid--smallgap {
	gap: var(--padding-primary-horizontal-px);
}

.grid--nogap {
	gap: 0;
}

@media screen and (max-width: 768px) {
	.grid,
	.grid.grid--34-66 {
		grid-template-columns: 100%;
	}
	.grid--reorder--mobile > *:first-child {
		order: 2;
	}
	.grid--reorder--mobile > *:last-child {
		order: 1;
	}
	.grid--nogap--mobile {
		gap:0 !important;
	}
}

/* TODOIS HAAAACKKKKKKK! */
@media screen and (min-width: 769px) {
	.grid--66-34 {
		grid-template-columns:
			minmax(calc(66% - (var(--padding-secondary-horizontal-px) / 2)), calc(66% - (var(--padding-secondary-horizontal-px) / 2)))
			minmax(calc(34% - (var(--padding-secondary-horizontal-px) / 2)), calc(34% - (var(--padding-secondary-horizontal-px) / 2)));
	}
}

.grid--34-66 {
	grid-template-columns:
		minmax(calc(34% - (var(--padding-secondary-horizontal-px) / 2)), calc(34% - (var(--padding-secondary-horizontal-px) / 2)))
		minmax(calc(66% - (var(--padding-secondary-horizontal-px) / 2)), calc(66% - (var(--padding-secondary-horizontal-px) / 2)));
}

.grid--33-34-33 {
	grid-template-columns:
		minmax(calc(33% - ((var(--padding-secondary-horizontal-px) * 2) / 3)), calc(33% - ((var(--padding-secondary-horizontal-px) * 2) / 3)))
		minmax(calc(34% - ((var(--padding-secondary-horizontal-px) * 2) / 3)), calc(34% - ((var(--padding-secondary-horizontal-px) * 2) / 3)))
		minmax(calc(33% - ((var(--padding-secondary-horizontal-px) * 2) / 3)), calc(33% - ((var(--padding-secondary-horizontal-px) * 2) / 3)));
}

.grid--75-25 {
	grid-template-columns:
		minmax(calc(75% - (var(--padding-secondary-horizontal-px) / 2)), calc(75% - (var(--padding-secondary-horizontal-px) / 2)))
		minmax(calc(25% - (var(--padding-secondary-horizontal-px) / 2)), calc(25% - (var(--padding-secondary-horizontal-px) / 2)));
}
/*
* {
	--breakpoint: var(--break-at, 30rem);
	--min: min((var(--breakpoint) - 100%) * 999, 100%);
	--clamp: clamp(100% / var(--cols, 1) - 15px, (var(--breakpoint) - 100%) * 999, 100%);
}
*/
.grid--test {
	grid-template-columns: repeat(auto-fit, minmax(clamp(33% - var(--padding-secondary-horizontal-px), 250px, 100%), 1fr));
}

.grid--r {
	--w: 250px;
	--n: 3;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(clamp(100%/ (var(--n) + 1) + 0.1%, var(--w), 100%), 1fr));
	gap: 10px;
}

.grid--responsive {
	/* first breakpoint*/
	--w1: 1200px;
	--n: 6;
	/* second breakpoint*/
	--w2: 800px;
	--m: 3;
	/* third breakpoint*/
	--w3: 400px;
	--p: 2;

	display: grid;
	grid-template-columns: repeat(
		auto-fill,
		minmax(clamp(clamp(clamp(100%/ (var(--n) + 1) + 0.1%, (var(--w1) - 100%) * 1000, 100%/ (var(--m) + 1) + 0.1%), (var(--w2) - 100%) * 1000, 100%/ (var(--p) + 1) + 0.1%), (var(--w3) - 100%) * 1000, 100%), 1fr)
	);
	gap: 10px;
}

.grid--xxx {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 125px), 1fr));
}

.grid--yyy {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 125px), 1fr));
}