.background {
	--overlay-top: -170px;
	--overlay-height: calc(100% + (2 * var(--overlay-top) * -1));
	--gradient-stop: 100px;
}

@media screen and (min-width: 1026px) {
	.background.bg--height-one {
		--overlay-top: -245px;
	}
	.background.bg--height-two {
		--overlay-top: -320px;
	}
	.background.bg--height-three {
		--overlay-top: -395px;
		margin: 0;
	}

	.background.bg--height-four {
		--overlay-top: -470px;
		margin: 0;
	}
}

.background__decorative-img,
.background::after,
.background--bg::before {
	content: "";
	position: absolute;
	top: var(--overlay-top);
	left: 0;
	width: 100%;
	height: var(--overlay-height);
	z-index: -1;
}

.background::after {
	top: calc(var(--overlay-top) - 20px);
	height: calc(var(--overlay-height) + 40px);
	background: linear-gradient(
		to bottom,
		var(--neutral) 0px,
		var(--neutral) var(--gradient-stop),
		transparent calc(0% + (2 * var(--gradient-stop))),
		transparent calc(100% - (2 * var(--gradient-stop))),
		var(--neutral) calc(100% - var(--gradient-stop)),
		var(--neutral) 100%
	);
}
.background.background--svg::after {
	background: linear-gradient(
		to bottom,
		var(--neutral) 0%,
		var(--neutral-trans-60) 30%,
		transparent 40%,
		transparent 60%,
		var(--neutral-trans-60) 70%,
		var(--neutral) 100%
	);
}
/* Gradients  */

@media screen and (min-width: 1026px) {
	.bg--gradient.bg--height-default {
		margin-top: var(--section-space-xl);
		margin-bottom: var(--section-space-xl);
	}
}
.entry-content > .bg--gradient:first-child {
	margin-top: var(--section-space-m);
}
.background--bg-one::before {
	background: var(--secondary-light);
}

.background--bg-two::before {
	background: var(--accent-medium);
}

.background--bg-three::before {
	background: var(--primary-ultra-light);
}

/* Image */
.background__decorative-img {
	object-fit: cover;
	opacity: 0.2;
	pointer-events: none;
}

/* Solid */
/* Add spacing in edges */
.background--bg-four {
	--solid-bg: var(--neutral);
}
.background--bg-five {
	--solid-bg: var(--neutral);
}
.bg--solid {
	box-shadow: inset 0px 0px 0px 25px var(--solid-bg);
}
@media screen and (max-width: 1025px) {
	.bg--solid {
		box-shadow: inset 0px 0px 0px 10px var(--solid-bg);
	}
}

/* Remove gradients */
.bg--solid::after,
.bg--solid::before {
	content: unset;
}
.background--bg-four {
	background: var(--accent);
}
.background--bg-four .highlight-line {
	background: white !important;
}
.background--bg-four .btn:not(.btn--link) {
	background: white;
}
.background--bg-four ul li::marker {
	color: var(--base);
}
@media screen and (min-width: 1026px) {
	.background--bg-four .btn:not(.btn--link):hover,
	.background--bg-four .btn:not(.btn--link):focus {
		background: var(--secondary);
	}
}
.background--bg-five {
	background: var(--primary-ultra-light);
}

/* Solid text-block should have padding*/
.bg--solid section.text-block {
	padding-block: var(--section-space-l);
}
/* Additional padidng in content-block*/
.bg--solid section.content {
	padding-block: var(--section-space-l);
}

.bg--solid + section {
	margin-top: 3.5rem !important;
}

@media screen and (min-width:1026px) {
	.bg--solid > section{
		margin-inline:2.5rem;
}