/*------------------------------------*\
    #LAYOUT
\*------------------------------------*/

/**
 * Layout Container
 * 1) Caps the width of the content to the maximum width
 *    and centers the container
 */
.l-container {
	max-width: $l-max-width;
	padding: 0 $spacing;
	margin: 0 auto;

	@media all and (min-width: $bp-large) {
		padding: 0 $spacing-large;
	}
}

.l-container--narrow {
	max-width: $l-max-width-narrow;
}

/**
 *
 * 1) This caps the width of text passages
 *    to achieve a comfortable line length
 */
.l-linelength-container {
    max-width: $l-linelength-width;
}

.l-band {
	background: $color-neutral-gray-02;
	padding: 2rem 1rem;
}

/**
 * 2 column layout
 */
.l-page-layout--two-column {
	display: flex;
	flex-direction: column;

	@media all and (min-width: $bp-large) {
		flex-direction: row;
	}
}

.l-page-layout__main {
	.l-page-layout--two-column & {
		@media all and (min-width: $bp-large) {
			width: 70%;
			padding-right: $spacing;
		}
	}
}

/**
 * Sidebar
 */
.l-page-layout__secondary {

	.l-page-layout--two-column & {
		@media all and (min-width: $bp-large) {
			width: 30%;
			margin-left: 2rem;
		}
	}

	.l-page-layout--reversed & {
		margin-bottom: 2rem;

		@media all and (min-width: $bp-large) {
			order: 1;
			margin-bottom: 0;
		}
	}
}



/*------------------------------------*\
    #GRID
\*------------------------------------*/

/**
 * Grid Container
 */
.l-grid {
	display: flex;
	flex-wrap: wrap;

	@supports (display: grid) {
		display: grid;
		grid-gap: $spacing-large;
		grid-template-columns: repeat(auto-fill, minmax(320px, 1fr) );
		margin: 0;
	}
}

/**
 * Grid Item
 */
.l-grid__item {
	display: flex;
}