/*!
* Components/XContainer
*/

.x-container {
	--x-container-breakpoint-xs-max-width: var(--x-comp-container-breakpoint-xs-max-width, 100%);
	--x-container-breakpoint-xs-spacing: var(--x-comp-container-breakpoint-xs-spacing, 1rem);
	--x-container-breakpoint-sm-max-width: var(--x-comp-container-breakpoint-sm-max-width, 100%);
	--x-container-breakpoint-sm-spacing: var(--x-comp-container-breakpoint-sm-spacing, 1.5rem);
	--x-container-breakpoint-md-max-width: var(--x-comp-container-breakpoint-md-max-width, 100%);
	--x-container-breakpoint-md-spacing: var(--x-comp-container-breakpoint-md-spacing, 1.5rem);
	--x-container-breakpoint-lg-max-width: var(--x-comp-container-breakpoint-lg-max-width, 75rem);
	--x-container-breakpoint-lg-spacing: var(--x-comp-container-breakpoint-lg-spacing, 1rem);
}

.x-container {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--x-container-max-width, var(--x-container-breakpoint-xs-max-width));
	padding: 0 var(--x-container-spacing, var(--x-container-breakpoint-xs-spacing));
	width: 100%;
}

@media (min-width: 37.5em) {
	.x-container {
		--x-container-max-width: var(--x-container-breakpoint-sm-max-width);
		--x-container-spacing: var(--x-container-breakpoint-sm-spacing);
	}
}

@media (min-width: 52.5em) {
	.x-container {
		--x-container-max-width: var(--x-container-breakpoint-md-max-width);
		--x-container-spacing: var(--x-container-breakpoint-md-spacing);
	}
}

@media (min-width: 80em) {
	.x-container {
		--x-container-max-width: var(--x-container-breakpoint-lg-max-width);
		--x-container-spacing: var(--x-container-breakpoint-lg-spacing);
	}
}

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