$o-contact-bp1: 900;

.o-contact {
	@include template(body, form);
	position: relative;
	z-index: 1;
	margin-bottom: space(6);
	padding-top: space(5);
	padding-bottom: space(6); // compensate for shadow on form

	@include mq($o-contact-bp1) {
		display: grid;
		grid-template-columns: 5.5fr 0.5fr 6fr;
		grid-template-rows: space(20) auto;
		grid-template-areas:
			". . form"
			"body . form";
		margin-top: space(-20);
	}
}

.o-contact__location {
	margin-top: space(5);
}


.o-contact__heading {
	@include font-size(m);
	@include font-weight(extraBold);
	margin-bottom: space(1);
}


.o-contact__subheading {
	@include font-size(base);
	@include font-weight(extraBold);
}


.o-contact__connect {
	margin-top: space(4);
	margin-bottom: space(3);

	a {
		color: palette(secondary, 500);
		text-decoration: none;
	}
}


.o-contact__timetable {
	margin: 0 0 space(10) 0;

	dt {
		float: left;
		clear: left;
		width: 140px;
	}
	dd {
		margin: 0 0 0 140px;
	}
}





.o-contact__form {
	align-self: start;
	padding: space(6) space(5);
	background: palette(neutral, 0);
	border: 1px solid palette(neutral, 300);
	box-shadow: 0 20px 48px 0 rgba(0,0,0,0.08);
	border-radius: map-get($border-radius, s) map-get($border-radius, s) map-get($border-radius, xl) map-get($border-radius, xs);

	@include mq($max: $o-contact-bp1) {
		margin-top: space(6);
		min-height: 400px;
	}
}