@layer main {
	@layer layout {
		.container {
			max-width: 100%;
			padding-inline: var(--container-padding);
			margin-inline: auto;
			width: var(--container-max-width);

			&.container-fluid {
				--container-max-width: 100%;
			}

			&.right-bleed {
				margin-inline: auto 0;
				padding-right: 0;
				width: calc(50vw + var(--container-max-width) / 2);
			}

			&.left-bleed {
				margin-inline: 0 auto;
				padding-left: 0;
				width: calc(50vw + var(--container-max-width) / 2);
			}

			&.full-bleed{
				--container-max-width: 100%;

				padding-inline: 0;
			}

			@container content (max-width: 768px) {
				&.nopadding-sm{
					padding-inline: 0;
				}
			}

			@container content (min-width: 769px) and (max-width: 1024px) {
				&.nopadding-md{
					padding-inline: 0;
				}
			}

			@container content (min-width: 1025px) {
				&.nopadding-lg{
					padding-inline: 0;
				}
			}
		}

		.row {
			display: flex;
			flex-wrap: wrap;
			margin-inline: calc(var(--column-gap) * -.5);
			row-gap: var(--row-gap);

			> * {
				margin: 0;

				&:not([class*="col-"]) {
					padding-inline: calc(var(--column-gap) / 2);
				}

				&:where([class*="push-"]) {
					margin-left: auto;
				}

				&:where([class*="pull-"]) {
					margin-right: auto;
				}
			}

			@container content (max-width: 768px) {
				.push-sm{
					margin-left: auto;
				}

				.pull-sm{
					margin-right: auto;
				}
			}

			@container content (min-width: 769px) and (max-width: 1024px) {
				.push-md{
					margin-left: auto;
				}

				.pull-md{
					margin-right: auto;
				}
			}

			@container content (min-width: 1025px) {
				.push-lg{
					margin-left: auto;
				}

				.pull-lg{
					margin-right: auto;
				}
			}
		}

		[class*="align-start-"] {
			align-items: flex-start;
		}

		[class*="align-center-"] {
			align-items: center;
		}

		[class*="align-end-"] {
			align-items: flex-end;
		}

		[class*="align-stretch-"] {
			align-items: stretch;
		}

		[class*="justify-start-"] {
			justify-content: start;
		}

		[class*="justify-center-"] {
			justify-content: center;
		}

		[class*="justify-end-"] {
			justify-content: end;
		}

		[class*="justify-between-"] {
			justify-content: space-between;
		}

		[class*="justify-around-"] {
			justify-content: space-around;
		}

		.align-start-sm {
			align-items: flex-start;
		}

		.align-center-sm {
			align-items: center;
		}

		.align-end-sm {
			align-items: flex-end;
		}

		.align-stretch-sm {
			align-items: stretch;
		}

		.justify-start-sm {
			justify-content: start;
		}

		.justify-center-sm {
			justify-content: center;
		}

		.justify-end-sm {
			justify-content: end;
		}

		.justify-between-sm {
			justify-content: space-between;
		}

		.justify-around-sm {
			justify-content: space-around;
		}

		@container content (min-width: 769px) {
			.align-start-md {
				align-items: flex-start;
			}

			.align-center-md {
				align-items: center;
			}

			.align-end-md {
				align-items: flex-end;
			}

			.align-stretch-md {
				align-items: stretch;
			}

			.justify-start-md {
				justify-content: start;
			}

			.justify-center-md {
				justify-content: center;
			}

			.justify-end-md {
				justify-content: end;
			}

			.justify-between-md {
				justify-content: space-between;
			}

			.justify-around-md {
				justify-content: space-around;
			}
		}

		@container content (min-width: 1025px) {
			.align-start-lg {
				align-items: flex-start;
			}

			.align-center-lg {
				align-items: center;
			}

			.align-end-lg {
				align-items: flex-end;
			}

			.align-stretch-lg {
				align-items: stretch;
			}

			.justify-start-lg {
				justify-content: start;
			}

			.justify-center-lg {
				justify-content: center;
			}

			.justify-end-lg {
				justify-content: end;
			}

			.justify-between-lg {
				justify-content: space-between;
			}

			.justify-around-lg {
				justify-content: space-around;
			}
		}
	}
}