.page-section--style-overflowtopright .page-section-aside,
.page-section--style-overflowtopleft .page-section-aside {
	display: block;
}


/* Mobile specific */
@media only screen and (max-width: 899px) {
	/*  Angled image style image */
	.page-section--style-overflowtopright .page-section-container, .page-section--style-overflowtopleft .page-section-container {
		display: flex;
		flex-direction: column-reverse;
		padding: 0px;
	}

	.page-section--style-overflowtopright .page-section-content, .page-section--style-overflowtopleft .page-section-content {
		padding: 25px;
	}

	.page-section--style-overflowtopright .page-section-aside, .page-section--style-overflowtopleft .page-section-aside {
		height: 100vw;
		position: relative;
	}

		.page-section--style-overflowtopright .page-section-aside::before, .page-section--style-overflowtopleft .page-section-aside::before {
			content: '';
			display: block;
			position: absolute;
			right: 0px;
			left: 0px;
			top: 0px;
			bottom: 0px;
			background-image: var(--background-image);
			background-size: cover;
			background-position: center top;
		}

		.page-section--style-overflowtopright .page-section-aside::after, .page-section--style-overflowtopleft .page-section-aside::after {
			content: '';
			display: block;
			background-image: url(../images/colorful-angled-background.svg);
			background-repeat: no-repeat;
			background-size:cover;			
			position: absolute;
			inset: 0 0 0 0;
			z-index: -1;
		}
}


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

	.page-section.page-section--style-overflowtopright:before, .page-section.page-section--style-overflowtopleft:before {
		clip-path: inset(80px 0 0 0);
	}

	/*  image left aligned */
	.page-section--style-overflowtopright .page-section-container {
		display: flex;
		flex-direction: row-reverse;
		min-height: 710px;
		padding: 0;
		gap: 100px;
	}

	.page-section--style-overflowtopright .page-section-aside {
		position: relative;
		flex: 1;
	}

	.page-section--style-overflowtopright .page-section-content {
		flex: 1;
		padding: 5em;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.page-section--style-overflowtopright .page-section-aside::before {
		content: '';
		display: block;
		position: absolute;
		right: 0px;
		left: 0px;
		top: 0px;
		bottom: 0px;
		background-image: var(--background-image);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: 0 0;
	}

	.page-section--style-overflowtopright .page-section-aside::after {
		content: '';
		display: block;
		background-image: url(../images/colorful-angled-background.svg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: top left;
		position: absolute;
		inset: 80px 0 0 0;
		z-index: -1;
	}

	/*  image right aligned */

	.page-section--style-overflowtopleft .page-section-container {
		display: flex;
		flex-direction: row;
		min-height: 710px;
		padding: 0;
		gap: 100px;
	}

	.page-section--style-overflowtopleft .page-section-aside {
		position: relative;
		flex: 1;
	}

	.page-section--style-overflowtopleft .page-section-content {
		flex: 1;
		padding: 5em;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}


	.page-section--style-overflowtopleft .page-section-aside::before {
		content: '';
		display: block;
		position: absolute;
		right: 0px;
		left: 0px;
		top: 0px;
		bottom: 0px;
		background-image: var(--background-image);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: 100% 0;
	}

	.page-section--style-overflowtopleft .page-section-aside::after {
		content: '';
		display: block;
		background-image: url(../images/colorful-angled-background.svg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position:top left;
		position: absolute;
		inset: 80px 0 0 0;
		z-index: -1;
		transform: scaleX(-1);
	}

}