.o-block {
	padding-block: $block-spacing;
}

.o-block-bg {
	padding-block: $block-spacing;
	background-color: palette(secondary, 75);
}

.o-block-bg-small {
	background-color: palette(secondary, 75);
}

.o-block-bg-black {
	padding-block: $block-spacing;
	background: palette(neutral, 950);
}

.o-block-bg-top {
	background: linear-gradient(to bottom, palette(secondary, 75) 50%, transparent 50.1%);
}

.o-block-bg-bottom {
	background: linear-gradient(to top, palette(secondary, 75) 50%, transparent 50.1%);
}

.o-block--no-overflow {
	overflow: hidden;
}

.o-block--light-shade {
	background-color: #FAFBFC;
}

/**
 * No styling needed, but the following class can be used to create a larger gap between o-blocks.
 * Margin and padding of consecutive blocks creates the extra gap when ->
 * an empty div with this class is placed between two '.o-block' or '.o-block-bg' divs.
 */
.o-block-gap {
	height: #{$block-spacing / 4};

	@include mq($max: $mobile-styling-overrule) {
		height: #{$block-spacing / 4};
	}
}

.o-block-gap--bg {
	background-color: palette(secondary, 75);
}