@use 'mixins' as *;

@layer layout {
	:root {
		--container-max-width-sm: 540px;
		--container-max-width-md: 720px;
		--container-max-width-lg: 1140px;
		--container-max-width-xl: 1320px;
		--container-max-width-thin: 960px;
	}
	.l-container {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		padding: 0 var(--spacing-5, 1rem);

		@include min-width($breakpoint-sm) {
			max-width: var(--container-max-width-sm);
		}

		@include min-width($breakpoint-md) {
			max-width: var(--container-max-width-md);
			padding: 0 var(--spacing-20, 1rem);
		}

		@include min-width($breakpoint-lg) {
			max-width: var(--container-max-width-lg);
		}

		@include min-width($breakpoint-xl) {
			max-width: var(--container-max-width-xl);
		}

		&--thin {
			max-width: min(100vw, var(--container-max-width-thin));
		}
	}
}
