HEX
Server: Microsoft-IIS/8.5
System: Windows NT YDAWBH120 6.3 build 9600 (Windows Server 2012 R2 Standard Edition) AMD64
User: tentjecom_web (0)
PHP: 7.4.14
Disabled: NONE
Upload Files
File: D:/HostingSpaces/SBogers10/stafa.komma.pro/resources/sass/site/6-Organisms/_organisms.contact.scss
.o-contact {
	position: relative;

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

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


	&::before {
		@include mq(600) {
			@include ornament-hex-filled();
			content: '';
			display: block;
			top: 35vmax;
		}

		@include mq(l) {
			top: 18vh;
		}
	}
}

.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, map, openinghours);
		display: grid;
		grid-template-columns: 5fr 1fr 1fr 1fr 4fr;
		grid-template-areas:
			"body . form form form"
			"map map map . openinghours";
	}
}

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

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

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

.o-contact__business {
	margin-top: space(6);
}

.o-contact__subheading {
	@include text-style(2);
	color: palette(text, 800);
	margin-bottom: space(3);
}

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

.o-contact__data {
	display: flex;
}

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

.o-contact__link {
	display: inline-block;
	color: palette(action, 300);
	text-decoration: none;
	cursor: pointer;
	transition: color 0.3s linear;

	&:hover {
		color: palette(action, 500);
	}
}

.o-contact__map {
	min-height: 580px;
	@include vspacing-l-up(
		'margin-top' 2
	);

	box-shadow: 0 12px 24px rgba(25,31,47,0.2);

}

.o-contact__openinghours {
	@include vspacing-l-up(
		'margin-top' 2
	)
}

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

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

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

.o-contact__bottom {
	height: space(22);
	margin-top: space(-11);
	background-color: palette(primary, 500);
}

.o-contact__ornament-triangle {
	margin-top: 0 !important; // Override
	z-index: -1;
}