// Component settings: Contact
// ------------------------------------------

$o-contact: (
	'bgcolor-form':		palette(neutral, 100),
	'bp-large':				1220
);

// ------------------------------------------

.o-contact {
	@include contain;
	position: relative;

	@include mq(map-get($o-contact, 'bp-large')) {
		display: flex;
	}
}

.o-contact__info {
	background-color: palette(neutral, 0);

	@include mq(m) {
		padding: space(6) column(1, 8);
	}

	@include mq(map-get($o-contact, 'bp-large')) {
		width: column(6,12);
		padding-left: column(1,12);
		padding-right: space(3);
	}
}

.o-contact__form {
	background-color: map-get($o-contact, 'bgcolor-form');

	// [1] Break out on mobile
	@include mq($max: m) {
		margin-top: double($site-gutter-width);
		padding: $site-gutter-width;
		width: 100vw; // [1]
		margin-left: 50%; // [1]
		transform: translateX(-50%); // [1]
	}

	@include mq(m) {
		padding: space(6) column(1,8);
	}

	@include mq(map-get($o-contact, 'bp-large')) {
		width: column(6,12);
		padding-left: column(1,12);
		padding-right: column(1,12);
	}
}

.o-contact__header {
	@include hyphenate;
	@include font-size(xl);
	margin-bottom: space(4);
	color: palette(text);
}

.o-contact__card {
	margin-bottom: space(5);
}

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

.o-contact__numbers {
	margin-top: space(2);
}