$o-event-bp1: 1000;
$o-event-bp2: l;
$o-event-padding-top-small: space(4);
$o-event-padding-top-large: space(6);




.o-event {
	@include template(data, form);
	display: grid;
	grid-row-gap: space(8);
	grid-template-columns: 1fr;
	grid-template-rows: repeat(2, auto);
	grid-template-areas:
		"data"
		"form";

	@include mq($o-event-bp1) {
		grid-template-columns: 6fr 5fr;
		grid-column-gap: column(1,12);
		grid-template-areas: "form data";
	}
}


.o-event__data {
	@include mq($o-event-bp1) {
		padding-top: $o-event-padding-top-small;
	}

	@include mq($o-event-bp2) {
		padding-top: $o-event-padding-top-large;
	}
}


.o-event__form {
	padding-top: $o-event-padding-top-small;
	padding-bottom: $o-event-padding-top-small;
	background-color: palette(neutral, 100);

	@include mq($max: m) {
		margin-left: column(-1,12);
		margin-right: column(-1,12);
		padding-left: column(1,12);
		padding-right: column(1,12);
	}

	@include mq(m) {
		padding-left: space(6);
		padding-right: space(6);
	}

	@include mq($o-event-bp2) {
		padding-top: $o-event-padding-top-large;
		padding-left: space(12);
		padding-right: space(12);
		padding-bottom: space(10);
	}
}


.o-event__info-list {
	$dt-width: 110px;
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 space(8);

	dt {
		width: $dt-width;
		text-transform: capitalize;
		align-self: flex-start;
		font-weight: bold;
	}
	dd {
		@include hyphenate;
		width: calc(100% - #{$dt-width});
	}
}


.o-event__heading {
	color: palette(neutral, 900);
	margin-bottom: space(4)
}


.o-event__servicepoint-heading {
	margin-top: space(8);
}