$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: $color-gray-light2;
	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;
	}
}

@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;
	}
}

@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;
	}
}

@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;
	}
}

@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;
	}
}

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