@layer main {
	@layer layout {
		[class*='col-'] {
			--flex-width: 100%;

			width: 100%;
			padding-inline: calc(var(--column-gap) / 2);
			flex: 0 0 var(--flex-width);
			max-width: var(--flex-width);

			&:where([class*='-md-12'], [class*='-lg-12']) {
				--flex-width: calc(12 / 12 * 100%);
			}

			&:where([class*='-md-11'], [class*='-lg-11']) {
				--flex-width: calc(11 / 12 * 100%);
			}

			&:where([class*='-md-10'], [class*='-lg-10']) {
				--flex-width: calc(10 / 12 * 100%);
			}

			&:where([class*='-md-9'], [class*='-lg-9']) {
				--flex-width: calc(9 / 12 * 100%);
			}

			&:where([class*='-md-8'], [class*='-lg-8']) {
				--flex-width: calc(8 / 12 * 100%);
			}

			&:where([class*='-md-7'], [class*='-lg-7']) {
				--flex-width: calc(7 / 12 * 100%);
			}

			&:where([class*='-md-6'], [class*='-lg-6']) {
				--flex-width: calc(6 / 12 * 100%);
			}

			&:where([class*='-md-5'], [class*='-lg-5']) {
				--flex-width: calc(5 / 12 * 100%);
			}

			&:where([class*='-md-4'], [class*='-lg-4']) {
				--flex-width: calc(4 / 12 * 100%);
			}

			&:where([class*='-md-3'], [class*='-lg-3']) {
				--flex-width: calc(3 / 12 * 100%);
			}

			&:where([class*='-md-2'], [class*='-lg-2']) {
				--flex-width: calc(2 / 12 * 100%);
			}

			&:where([class*='-md-1'], [class*='-lg-1']) {
				--flex-width: calc(1 / 12 * 100%);
			}

			&:where([class*='col-md']):not([class*='col-md-']),
			&:where([class*='col-lg']):not([class*='col-lg-']) {
				flex: 1 0 0;
			}
		}

		.col-sm-12 {
			--flex-width: calc(12 / 12 * 100%);
		}

		.col-sm-11 {
			--flex-width: calc(11 / 12 * 100%);
		}

		.col-sm-10 {
			--flex-width: calc(10 / 12 * 100%);
		}

		.col-sm-9 {
			--flex-width: calc(9 / 12 * 100%);
		}

		.col-sm-8 {
			--flex-width: calc(8 / 12 * 100%);
		}

		.col-sm-7 {
			--flex-width: calc(7 / 12 * 100%);
		}

		.col-sm-6 {
			--flex-width: calc(6 / 12 * 100%);
		}

		.col-sm-5 {
			--flex-width: calc(5 / 12 * 100%);
		}

		.col-sm-4 {
			--flex-width: calc(4 / 12 * 100%);
		}

		.col-sm-3 {
			--flex-width: calc(3 / 12 * 100%);
		}

		.col-sm-2 {
			--flex-width: calc(2 / 12 * 100%);
		}

		.col-sm-1 {
			--flex-width: calc(1 / 12 * 100%);
		}

		.col-sm {
			flex: 1 0 0;
		}

		@container content (min-width: 769px) {
			.col-md-12 {
				--flex-width: calc(12 / 12 * 100%);
			}

			.col-md-11 {
				--flex-width: calc(11 / 12 * 100%);
			}

			.col-md-10 {
				--flex-width: calc(10 / 12 * 100%);
			}

			.col-md-9 {
				--flex-width: calc(9 / 12 * 100%);
			}

			.col-md-8 {
				--flex-width: calc(8 / 12 * 100%);
			}

			.col-md-7 {
				--flex-width: calc(7 / 12 * 100%);
			}

			.col-md-6 {
				--flex-width: calc(6 / 12 * 100%);
			}

			.col-md-5 {
				--flex-width: calc(5 / 12 * 100%);
			}

			.col-md-4 {
				--flex-width: calc(4 / 12 * 100%);
			}

			.col-md-3 {
				--flex-width: calc(3 / 12 * 100%);
			}

			.col-md-2 {
				--flex-width: calc(2 / 12 * 100%);
			}

			.col-md-1 {
				--flex-width: calc(1 / 12 * 100%);
			}

			.col-md {
				flex: 1 0 0;
			}
		}

		@container content (min-width: 1025px) {
			.col-lg-12 {
				--flex-width: calc(12 / 12 * 100%);
			}

			.col-lg-11 {
				--flex-width: calc(11 / 12 * 100%);
			}

			.col-lg-10 {
				--flex-width: calc(10 / 12 * 100%);
			}

			.col-lg-9 {
				--flex-width: calc(9 / 12 * 100%);
			}

			.col-lg-8 {
				--flex-width: calc(8 / 12 * 100%);
			}

			.col-lg-7 {
				--flex-width: calc(7 / 12 * 100%);
			}

			.col-lg-6 {
				--flex-width: calc(6 / 12 * 100%);
			}

			.col-lg-5 {
				--flex-width: calc(5 / 12 * 100%);
			}

			.col-lg-4 {
				--flex-width: calc(4 / 12 * 100%);
			}

			.col-lg-3 {
				--flex-width: calc(3 / 12 * 100%);
			}

			.col-lg-2 {
				--flex-width: calc(2 / 12 * 100%);
			}

			.col-lg-1 {
				--flex-width: calc(1 / 12 * 100%);
			}

			.col-lg {
				flex: 1 0 0;
			}
		}
	}
}