.layer {
	position: absolute;
	width: auto;
	height: 100%;
	flex: 0 0 auto;
}

.section-layer {
	position: absolute;
	display: flex;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	pointer-events: none;
}

.section-image {
	position: absolute;
	pointer-events: none;
}

.section-1 .section-layer {
	justify-content: flex-end;
}

.section-1 .layer {
	height: 95.55%;
}

.section-1 .section-image {
	right: 0;
	width: 44%;
}

.section-2 .section-row {
	flex-direction: row-reverse;
}

.section-2 .section-image {
	bottom: 0;
	width: 37.45%;
}

.section-3 .section-layer {
	justify-content: flex-end;
}

.section-3 .layer {
	height: 95.55%;
}

.section-3 .section-image {
	right: 0;
	width: 48.85%;
}

.section-4 .section-layer {
	left: auto;
	right: -5.73%;
	justify-content: flex-end;
}

.section-5 .section-row {
	flex-direction: row-reverse;
}

.section-5 .section-image {
	bottom: 0;
	left: 0;
	width: 34.48%;
}

.section-6 .section-layer {
	justify-content: center;
}

.section-7 .section-layer {
	justify-content: center;
}

.section-7 .section-image {
	right: 0;
	width: 25%;
}

.section-8 .section-layer {
	justify-content: flex-end;
}

@media (min-width: 768px) {
	.section-1 .section-image {
		width: 54.64%;
	}
	.section-5 .section-image {
		left: 5%;
	}
}

@media (min-width: 1200px) {
	.section-7 .section-image {
		width: 27.8125%;
	}
}

@media (orientation: portrait) {
	[class*='section-'] .section-layer {
		justify-content: center;
	}
	.section-figure {
		max-width: 100%;
		flex-basis: 100%;
		padding-bottom: 40%;
	}
	.section-content {
		max-width: 450px;
		flex-basis: 450px;
	}
	.section-1 .section-layer,
	.section-3 .section-layer {
		left: -15%;
	}
	.section-1 .section-image,
	.section-3 .section-image {
		width: 70%;
		bottom: 0;
	}
	.section-2 .section-layer {
		left: -15%;
		justify-content: flex-start;
	}
	.section-2 .section-row {
		flex-direction: row;
	}
	.section-2 .section-image {
		width: 45%;
	}
	.section-4 .section-layer {
		right: auto;
		left: 0;
	}
	.section-5 .section-layer {
		left: -20%;
		justify-content: flex-start;
	}
	.section-5 .section-row {
		flex-direction: row;
	}
	.section-5 .section-image {
		width: 50%;
		left: auto;
	}
	.section-7 .section-layer {
		left: -15%;
		justify-content: flex-start;
	}
	.section-7 .section-image {
		width: 37%;
		bottom: 0;
	}
}

@media (orientation: portrait) and (min-width: 480px) {
	.section-figure {
		padding-bottom: 56%;
	}
	.section-content-2,
	.section-content-3 {
		max-width: 100%;
		flex: 0 0 100%;
	}
	.section-1 .section-image,
	.section-3 .section-image {
		width: 80%;
	}
	.section-2 .section-image {
		width: 50%;
	}
}

@media (orientation: portrait) and (min-width: 576px) {
	.section-content-2 {
		max-width: 66.66667%;
		flex: 0 0 66.66667%;
	}
	.section-content-3 {
		max-width: 75%;
		flex: 0 0 75%;
	}
}

@media (orientation: portrait) and (min-width: 768px) {
	.section-content {
		margin-left: 8.33333%;
		max-width: 50%;
		flex-basis: 50%;
	}
}