/* Slants */
.page-section {
	--background-height:100%;
}

.page-section--half-background::before {
	--background-height: 50%;
	clip-path: polygon(0 0, 100% 0, 100% var(--background-height), 0% var(--background-height));
}


.page-section--slant-top::before {
	margin-top: calc(var(--slant) * -1);
	padding-top: var(--slant);
	clip-path: polygon(0 var(--slant), 100% 0, 100% var(--background-height), 0% var(--background-height));
}

.page-section--slant-bottom::before {
	clip-path: polygon(0 0, 100% 0, 100% calc(var(--background-height) - var(--slant)), 0% var(--background-height));
}

.page-section--slant-top.page-section--slant-bottom::before {
	clip-path: polygon(0 var(--slant), 100% 0, 100% calc(var(--background-height) - var(--slant)), 0% var(--background-height));
}


/* Desktop specific */
@media only screen and (min-width: 900px) {

	.page-section--slant-top::before {
		clip-path: polygon(0 var(--slant), 100% 0, 100% var(--background-height), 0% var(--background-height));
	}
}