$o-banner-bp1: 760;

.o-banner {
	background-color: palette(primary, 300);
}

.o-banner__main {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: repeat(2, auto);
	max-width: 1440px;
	margin: 0 auto;
}


.o-banner__picture {
	grid-column: 1;
	grid-row: 1;

	@include mq($max: $o-banner-bp1) {
		height: 100vw;
		max-height: 60vh;
	}

	@include mq($o-banner-bp1) {
		grid-row: 1 / -1;
	}
}


.o-banner__img {
	@include mq($max: $o-banner-bp1) {
		height: 100%;
		object-fit: cover;
	}
}


.o-banner__description {
	grid-column: 1;
	grid-row: 2;
	align-self: end;
	justify-content: center;
	color: palette(neutral, 0);

	@include mq($max: $o-banner-bp1) {
		background-color: palette(primary, 600);
	}

	@include mq($o-banner-bp1) {
		position: relative;
		$w: 41.67vw;
		width: $w;
		height: $w/2;
		border-top-left-radius: $w/2;
		border-top-right-radius: $w/2;
		margin: 0 auto;
		overflow: hidden;
		display: flex;
		align-items: flex-start;
		background: rgba(182,215,240,0.24);
		backdrop-filter: blur(14px);
	}

	@include mq($bp-max) {
		$w: 600px;
		width: $w;
		height: $w/2;
		border-top-left-radius: $w/2;
		border-top-right-radius: $w/2;
	}
}


.o-banner__heading {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	padding: 7vw 5vw 0;
	text-align: center;
	font-family: $font-mokoko;

	@include mq($max: $o-banner-bp1) {
		padding: space(6) 0 space(3);
		@include contain;
	}

	@include mq($bp-max) {
		padding: space(14) space(10) 0;
	}
}


.o-banner__title {
	@include font-size(xxxl);
	@include font-weight(light);

	@include mq($o-banner-bp1, $max: $bp-max) {
		font-size: 2.9vw;
	}
}


.o-banner__subtitle {
	@include font-size(base);
	@include font-weight(extra-bold);
}