$o-hero-bp1: 700;
$o-hero-menu-bp1: 1200;


.o-hero {
	@include template(img, menu);
	padding-top: space(2);
	padding-left: column(1,14);
	background-color: palette(primary, 600);
	border-bottom-right-radius: map-get($border-radius, xxl);
	overflow: hidden;

	@include mq($bp-max) {
		padding-left: $site-max-gutter-width;
	}
}


.o-hero__frame {
	border-top-left-radius: map-get($border-radius, xxl);
	border-bottom-right-radius: map-get($border-radius, xxl);
	background-color: rgba(white, 0.15);
	overflow: hidden;
}

.o-hero__img {
	height: 100%; 
	//height: 45vh;
	width: 100%;
	object-fit: cover;

	#about & {
		object-position: 75% 50%;
	}

	@include mq($max: full-nav) {
		max-height: 57vw; // make sure image doesn't get to high
	}
}


// Special version for home, with a menu over the image

.o-hero--home {
	padding-left: 0;
	background-image: none;

	@include mq($max: $o-hero-menu-bp1) {
		background-color: transparent;
		background-image: linear-gradient(palette(primary, 600) 200px, transparent 200px);
		border-radius: 0;
	}

	@include mq($o-hero-menu-bp1) {
		display: grid;
		grid-template-columns: column(1,14) column(12,14) column(1,14);
		grid-template-rows: space(3) 1fr;
	}

	@include mq($bp-max) {
		grid-template-columns: $site-max-gutter-width 1fr $site-max-gutter-width;
		padding-left: 0;
	}


	.o-hero__frame {
		grid-row: 2 / span 1;
		grid-column: 1 / span 2;
		border-radius: 0; // reset
		border-top-right-radius: map-get($border-radius, xl);

		@include mq($o-hero-bp1) {
			border-top-right-radius: map-get($border-radius, xxl);
		}
	}


	.o-hero__img {
		position: relative;
		z-index: 0;
		max-height: 57vw; // make sure image doesn't get to high
	}


	.o-hero__menu {
		position: relative;
		z-index: 0;
		max-width: 33em;
		background-color: palette(neutral, 0);

		@include mq($max: $o-hero-menu-bp1) {
			position: relative;
			padding: space(5) space(4);
			margin: space(-10) column(1,14) space(4);
			background: palette(neutral, 0);
			box-shadow: 0 10px 24px 0 rgba(0,0,0,0.08);
			border-radius: map-get($border-radius, s) map-get($border-radius, l) map-get($border-radius, s) map-get($border-radius, s);
		}
		@include mq($o-hero-menu-bp1) {
			grid-row: 1 / span 2;
			grid-column: 2 / span 1;
			align-self: start;
			margin-bottom: space(7);
			padding: space(7) space(6) space(5);
			box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.64);
			border-radius: map-get($border-radius, s) map-get($border-radius, s) map-get($border-radius, xl) map-get($border-radius, xs);
		}
	}
}