/* All Screens */
.container {
	container-type:inline-size;
}

.cols-6,
.cols-5,
.cols-4,
.cols-3,
.cols-2,
.cols-1 {
	--cols: 1;
	--gap: 4px;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: stretch;
	align-content: flex-start;
	justify-content: flex-start;
	gap: var(--gap);
}

.cols-2-6,
.cols-2-5,
.cols-2-4,
.cols-2-3 {
	--cols: 2;
	--gap: 4px;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: stretch;
	align-content: flex-start;
	justify-content: flex-start;
	gap: var(--gap);
}

.cols-6 > *,
.cols-5 > *,
.cols-4 > *,
.cols-3 > *,
.cols-2-6 > *,
.cols-2-5 > *,
.cols-2-4 > *,
.cols-2-3 > *,
.cols-2 > *,
.cols-1 > * {
	display:block;
	flex-grow:0;
	flex-shrink:0;
	width: calc(( 100% - ((var(--cols) - 1) * var(--gap))) / var(--cols));
}

.cols-6 > .col-2x,
.cols-5 > .col-2x,
.cols-4 > .col-2x,
.cols-3 > .col-2x,
.cols-2 > .col-2x,
.cols-1 > .col-2x {
	width: clamp( 0px, calc((200% / var(--cols)) - var(--gap)), 100%);
}

.cols-6.no-gap,
.cols-5.no-gap,
.cols-4.no-gap,
.cols-3.no-gap,
.cols-2.no-gap,
.cols-1.no-gap {
	gap: 0px;
}

.cols-6.no-gap > *,
.cols-5.no-gap > *,
.cols-4.no-gap > *,
.cols-3.no-gap > *,
.cols-2.no-gap > *,
.cols-1.no-gap > * {
	width: calc( 100%  / var(--cols));
}

/* SMALL Screens (Phone) */
@container (min-width:640px) {
	.cols-6,
	.cols-2-6 {
		--cols: 3;
		--gap: 8px;
	}

	.cols-5,
	.cols-2-5 {
		--cols: 2;
		--gap: 8px;
	}

	.cols-4,
	.cols-2-4,
	.cols-2-3 {
		--cols: 2;
		--gap: 8px;
	}

	.cols-3 {
		--cols: 1;
		--gap: 8px;
	}

	.cols-2 {
		--cols: 1;
		--gap: 8px;
	}

	.cols-1 {
		--cols: 1;
		--gap: 8px;
	}
}


/* MEDIUM Screens (Tablet) */
@container (min-width:768px) {

	.cols-6,
	.cols-2-6 {
		--cols: 4;
		--gap: 12px;
	}

	.cols-5,
	.cols-2-5 {
		--cols: 3;
		--gap: 12px;
	}

	.cols-4,
	.cols-2-4,
	.cols-2-3 {
		--cols: 3;
		--gap: 12px;
	}

	.cols-3 {
		--cols: 2;
		--gap: 12px;
	}

	.cols-2 {
		--cols: 2;
		--gap: 12px;
	}

	.cols-1 {
		--cols: 1;
		--gap: 12px;
	}
}


/* LARGE Screens (Desktop) */
@container (min-width:1024px) {

	.cols-6,
	.cols-2-6 {
		--cols: 5;
		--gap: 24px;
	}

	.cols-5,
	.cols-2-5 {
		--cols: 4;
		--gap: 24px;
	}

	.cols-4,
	.cols-2-4 {
		--cols: 4;
		--gap: 24px;
	}

	.cols-3,
	.cols-2-3 {
		--cols: 3;
		--gap: 24px;
	}

	.cols-2 {
		--cols: 2;
		--gap: 24px;
	}

	.cols-1 {
		--cols: 1;
		--gap: 24px;
	}
}

/* EXTRA LARGE Screens (Wide Desktop) */
@container (min-width:1280px) {

	.cols-6,
	.cols-2-6 {
		--cols: 6;
		--gap: 24px;
	}

	.cols-5,
	.cols-2-5 {
		--cols: 5;
		--gap: 24px;
	}

	.cols-4,
	.cols-2-4 {
		--cols: 4;
		--gap: 24px;
	}

	.cols-3,
	.cols-2-3 {
		--cols: 3;
		--gap: 24px;
	}

	.cols-2 {
		--cols: 2;
		--gap: 24px;
	}

	.cols-1 {
		--cols: 1;
		--gap: 24px;
	}
}