// =============================================================================
// :: Container
// =============================================================================
.l-container {
	width: calc(100% - (#{get-viewport-spacing("mobile")} * 2));
	max-width: $container-width-base;
	margin: 0 auto;

	@each $breakpoint, $params in trim-to($breakpoints, "tablet") {
		$viewport-spacing: map-get($params, viewport-spacing);

		@include respond-at(get-breakpoint($breakpoint)) {
			width: calc(100% - (#{$viewport-spacing} * 2));
		}
	}
}

// =============================================================================
// :: Modifiers
// =============================================================================

.l-container--right {
	margin-right: 0;
}

.l-container--left {
	margin-left: 0;
}

.l-container--small {
	padding: 0 2rem;

	@include respond-at(get-breakpoint("tablet")) {
		padding: 0 10rem;
	}
}


.l-container--rounded-top {
	padding-top: 5rem;

	background-color: $background-color-base;

	border-radius: $border-radius-1x-small $border-radius-1x-small 0 0;

	@include respond-at(get-breakpoint("tablet")) {
		padding-top: 9rem;
	}
}