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

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

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

.o-contact {
	background-color: palette(neutral, 0);
	position: relative;

	@include mq(map-get($o-contact, 'bp-large')) {
		display: flex;
		width: calc((100% / #{$site-columns-l + 2}) * #{$site-columns-l});
		max-width: #{$site-max-width}px;
		margin-left: auto;
		margin-right: auto;
	}
}


.o-contact__info {
	@include gutterPadding(m);
	@include gutterPadding(l);
	padding-top: space(4);
	padding-left: $site-gutter-width;
	padding-right: $site-gutter-width;


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

.o-contact__form {
	@include gutterPadding(m);
	@include gutterPadding(l);
	margin-top: space(4);
	padding: space(4) $site-gutter-width;
	background-color: map-get($o-contact, 'bgcolor-form');

	@include mq(map-get($o-contact, 'bp-large')) {
		width: column(6,12);
		margin-top: 0;
		padding-top: space(6);
	}
}

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

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

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

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