.o-contact {
	position: relative;

	@include vspacing(
		'margin-top' 0.75
	);

	// Larger view gets a grid layout
	@include mq(l){
		@include template(body, form, extra);
	}
}

.o-contact__main {
	@include contain;

	// In stacked view (smaller screens) create white space between blocks
	> * + * {
		@include vspacing-m-down(
			'margin-top' 1
		);
	}

	@include mq(l){
		@include template(body, form);
		display: grid;
		grid-template-columns: 5fr 1fr 7fr;
		grid-template-areas:
			"body     .   form"
			"extra extra extra";
	}
}

.o-contact__title {
	@include text-style(5);
	color: palette(secondary, 500);
}

.o-contact__heading {
	@include text-style(1);
	color: palette(neutral);
	margin-top: space(3);
}

// Doubling up specificity
// https://css-tricks.com/the-sass-ampersand/#article-header-id-11
.o-contact__subheading {
	&#{&} {
		@include font-size(l);
		@include font-family(primary);
		@include font-weight(semi-bold);
		color: palette(primary, 500);
		margin-bottom: space(3);
	}
}

.o-contact__row {
	@include owl(space(3));
}

.o-contact__label {
	min-width: space(5);
}

.o-contact__timeslot {
	margin-top: space(3);
}

.o-contact__timeframe {
	color: palette(primary, 700);
}

.o-contact__time {
	color: palette(secondary, 500);
}