$o-block-spacing: 120px;

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

.o-block-bg {
	padding-top: #{$o-block-spacing / 3 * 2};
	padding-bottom: #{$o-block-spacing / 3 * 2};
	background-color: palette(neutral);

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

.o-block--pull-up {
	margin-top: -60px;
}

.o-block--cta {
	margin-top: 120px;
	margin-bottom: 180px;
}

.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($max: m) {
	$o-block-spacing: 80px;

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

	.o-block-bg {
		padding-top: #{$o-block-spacing / 3 * 2};
		padding-bottom: #{$o-block-spacing / 3 * 2};
	}

	.o-block--cta {
		margin-top: $o-block-spacing;
		margin-bottom: #{$o-block-spacing / 4 * 5};
	}
}