/* 
	min-width: 0em     -> xs (0px)
	min-width: 30em    -> sm (480px)
	min-width: 48em    -> md (768px)
	min-width: 90em    -> lg (1440px)
	min-width: 120em   -> xl (1920px)

	12 cols grid
	1  item :  12 col -> 100% (gap)
	2  items:   6 col -> 50% (gap)
	3  items:   4 col -> 33.33% (gap)
	4  items:   3 col -> 25% (gap)
	5  items: 2.4 col -> 20% (gap)
	6  items:   2 col -> 16.66% (gap)
	7  items: 1.7 col -> 14.28% (gap)
	8  items: 1.5 col -> 12.5% (gap)
	9  items: 1.3 col -> 11.11% (gap)
	10 items: 1.2 col -> 10% (gap)
	11 items:   1 col -> 9.09% (gap)
	12 items:   1 col -> 8.33% (gap)
*/

.row {
	/* 1  item :  12 col -> 100% (gap) */
	--cols-12: 100%;

	/* 2  items:   6 col -> 50% (gap) */
	--cols-6: calc(50% - var(--gap-default));

	/* 3  items:   4 col -> 33.33% (gap) */
	--cols-4: calc(33.33% - var(--gap-default));

	/* 4  items:   3 col -> 25% (gap) */
	--cols-3: calc(25% - var(--gap-default));

	/* 5  items: 2.4 col -> 20% (gap) */
	--cols-24: calc(20% - var(--gap-default));
}

.row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-default);
}

.col {
	flex: 1 0 auto;
}

/* xs */
@media (width >=0) {
	.xs-12 {
		width: var(--cols-12);
	}

	.xs-6 {
		width: var(--cols-6);
	}

	.xs-4 {
		width: var(--cols-4);
	}
}

/* sm */
@media (width >=30em) {
	.sm-12 {
		width: var(--cols-12);
	}

	.sm-6 {
		width: var(--cols-6);
	}

	.sm-4 {
		width: var(--cols-4);
	}

	.sm-3 {
		width: var(--cols-3);
	}
}

/* md */
@media (width >=48em) {}

/* lg */
@media (width >=90em) {
	.lg-24 {
		width: var(--cols-24);
	}
}

/* xl */
@media (width >=120em) {}