$o-block-spacing: 100px;

.o-block {
	margin-top: $o-block-spacing;
	margin-bottom: $o-block-spacing;
	@include contain;

	&:first-of-type {
		margin-top: 0;
		margin-bottom: 0;
		.c-text-image {
			min-height: 355px;
		}
	}

	.c-home-header-streamer + & {
		@include mq(1200) {
			margin-top: 180px;
			margin-bottom: 150px;
		}
	}
}

.o-block-bg {
	margin-top: 0;
	margin-bottom: 0;
	width: 100%;
  	max-width: none;
	padding-top: 60px;
	padding-bottom: 60px;
	overflow-x: hidden;

	@include mq(425) {
		padding-top: $o-block-spacing;
		padding-bottom: $o-block-spacing;
	}

	& > div {
		@include contain;
	}

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

.o-block-grey {
	background-color: palette(secondary, 100);
}

.o-block-grey-border-on-grey {
	background: linear-gradient( to bottom, palette(secondary, 100) 0%, palette(secondary, 100) 42%, palette(secondary, 200) 42.1%, palette(secondary, 200) 100%);
}

.o-block-grey-border-diagonal {
	background: linear-gradient( 135deg, palette(secondary, 100) 0%, palette(secondary, 100) 70%, palette(secondary, 200) 70.1%, palette(secondary, 200) 100%);
}

.o-block-grey-border-on-white {
	background: linear-gradient( to bottom, white 0%, white 42%, palette(secondary, 200) 42.1%, palette(secondary, 200) 100%);
}

.o-block-white {
	background-color: white;
}

.o-block-black {
	background-color: palette(dark);
}

.o-block--no-gap {
	@include mq(900) {
		margin-top: -160px;
		padding-top: 160px;
	}
}