$break-1: 900px;
$break-2: 1200px;
$break-3: 1400px;
$break-4: 1600px;
$break-5: 1800px;

.layout-header, .layout-footer {
	flex: 0 0 auto;
	width: 100%;
}

.layout-body {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	padding: 2rem;
}

.layout-content {
	margin-top: 2rem;
}

.layout-sidebar {
	order: -1;
	background-color: map-get($gray-shades, 200);
	padding: 1rem;
}

footer {
	margin: auto auto 0 auto;
    bottom: 0;
	z-index: 888;
	@include sticky();
}

@media (min-width: $break-1) {
	.layout-body {
		flex-direction: row;
	}

	.layout-sidebar {
		flex: 0 0 200px;
		width: 200px;
		height: calc(100vh - 140px);
		@include sticky();
		top: 2rem;
	}

	.layout-content {
		flex: 0 1 700px;
		padding: 0 2rem;
		margin: 0;
		max-width: 700px;
	}
}

@media (min-width: $break-2) {
	.layout-body {
		flex-direction: row;
	}

	.layout-sidebar {
		flex: 0 0 300px;
		width: 300px;
	}

	.layout-content {
		flex: 0 1 1000px;
		margin: 0;
		padding: 0 2rem 0 3rem;
		max-width: 1000px;
	}
}

@media (min-width: $break-3) {
	.layout-body {
		flex-direction: row;
	}

	.layout-sidebar {
		flex: 0 0 400px;
		width: 400px;
	}

	.layout-content {
		flex: 0 1 1000px;
		margin: 0;
		padding: 0 0 0 3rem;
		max-width: 1000px;
	}
}

@media (min-width: $break-4) {
	.layout-body {
		flex-direction: row;
	}

	.layout-sidebar {
		flex: 0 0 450px;
		width: 450px;
	}

	.layout-content {
		flex: 0 1 1200px;
		margin: 0;
		padding: 0 2rem 0 3rem;
		max-width: 1200px;
	}
}

@media (min-width: $break-5) {
	.layout-body {
		flex-direction: row;
	}

	.layout-sidebar {
		flex: 0 0 500px;
		width: 500px;
	}

	.layout-content {
		flex: 0 1 1300px;
		margin: 0;
		padding: 0 2rem 0 4rem;
		max-width: 1300px;
	}
}

@media (max-width: 576px) {
	footer {
		position: relative;
		bottom: auto;
	}
}

/**
 * Conditional CSS for Edge 12+.
 * @link: https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/
 */
 @supports (-ms-ime-align:auto) {
	// For IE/Edge footer must be at bottom as sticky/flex is not quite supported.
	.layout-footer, footer {
		position: relative !important;
	}
}

/**
 * Conditional CSS for IE 8+ (and old Firefox 1.x).
 * @link: https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/
 */
@media screen\0 {
	/* Conditional IE styles */
}