.layout {
	position: relative;
}

.layout-media {
	min-height: 300px;
}

.layout-content {
	padding: 1.25rem 0.9375rem;
}

.layout-2 .layout-content {
	padding: 1.875rem 0.9375rem 3.125rem;
}

.layout-3 .layout-media {
	min-height: 200px;
}

.layout-3 .layout-content {
	position: relative;
	z-index: 1;
	max-width: 522px;
	padding: 1.875rem 0.9375rem;
}

@media (min-width: 992px) {
	.layout {
		display: flex;
	}
	.layout-1 {
		padding: 5.625rem 0rem;
	}
	.layout-1 .layout-media {
		position: absolute;
		left: 19%;
		top: 0;
		bottom: 0;
		width: calc(100vw - 19% - (100vw - 960px) / 2);
	}
	.layout-1 .layout-content {
		position: relative;
		z-index: 1;
		max-width: 420px;
		padding: 3.4375rem 2.5rem 3.4375rem 0rem;
	}
	.layout-1 .layout-content::before {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: -1;
		width: 100vw;
		background-color: inherit;
		content: '';
	}
	.layout-2 {
		justify-content: flex-end;
	}
	.layout-2 .layout-media {
		position: absolute;
		right: 60%;
		top: 4.0625rem;
		bottom: 4.0625rem;
		z-index: 1;
		width: calc( 100vw - 60% - (100vw - 960px) / 2);
	}
	.layout-2 .layout-content {
		position: relative;
		z-index: 0;
		max-width: 860px;
		width: 100%;
		padding: 3.4375rem 0rem 3.4375rem;
		padding-left: 38%;
	}
	.layout-2 .layout-content::before {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		z-index: -1;
		width: 100vw;
		background-color: inherit;
		content: '';
	}
	.layout-3 {
		display: block;
		padding-top: 60%;
	}
	.layout-3 .layout-media {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 50px;
		width: 80%;
	}
	.layout-3 .layout-content {
		padding: 1.875rem 2.5rem 2.8125rem;
	}
}

@media (min-width: 1200px) {
	.layout-1 .layout-media {
		width: calc(100vw - 19% - (100vw - 1200px) / 2);
	}
	.layout-2 .layout-media {
		width: calc( 100vw - 60% - (100vw - 1200px) / 2);
	}
	.layout-2 .layout-content {
		padding: 6.25rem 0rem 9.0625rem;
		padding-left: 25%;
	}
}