$o-block-spacing: 40px;

.o-heading + .o-block {
	margin-top: $o-block-spacing / 4 * 3;
}

.o-block {
	margin-top: $o-block-spacing;
	margin-bottom: $o-block-spacing;
}

.o-block-100 {
	margin-top: 100px;
	margin-bottom: 100px;
}

.o-block-bg {
	padding-top: $o-block-spacing;
	padding-bottom: $o-block-spacing;
	background-color: palette(neutral);

	// Reset top padding to prevent double spacing because padding doesn't collapse
	& + & {
		padding-top: 0;
	}
}

.o-block-bg-top {
	background: linear-gradient(to bottom, palette(neutral) 50%, transparent calc(50% + 1px));
}

.o-block-bg-bottom {
	background: linear-gradient(to top, palette(neutral) 50%, transparent calc(50% + 1px));
}

@include mq(m) {
	$o-block-spacing: 80px;

	.o-heading + .o-block {
		margin-top: $o-block-spacing / 4 * 3;
	}

	.o-block {
		margin-top: $o-block-spacing;
		margin-bottom: $o-block-spacing;
	}

	.o-block-bg {
		padding-top: $o-block-spacing;
		padding-bottom: $o-block-spacing;
	}
}