.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: $color-gray-light2;
	padding: 1rem;
}

footer {
	margin: auto auto 0 auto;
    bottom: 0;
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -ms-sticky;
	position: -o-sticky;
	position: -webkit-sticky;
	position: sticky;
}

@media (min-width: 900px) {
	.layout-body {
		flex-direction: row;
	}

	.layout-sidebar {
		flex: 0 0 200px;
	}

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

@media (min-width: 1200px) {
	.layout-body {
		flex-direction: row;
	}

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

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

@media (min-width: 1400px) {
	.layout-body {
		flex-direction: row;
	}

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

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

@media (min-width: 1600px) {
	.layout-body {
		flex-direction: row;
	}

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

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

@media (min-width: 1800px) {
	.layout-body {
		flex-direction: row;
	}

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

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

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