/*
 * Title with background
*/

.banner {
	display: flex;
	align-items: flex-end;
	min-height: 36em;
	padding: 3em 0 2.2em;
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	text-align: center;
	color: #fff;
}

.banner::before {
	content: "";
	display: block;
	height: 25.8em;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	background: linear-gradient(360deg, #164771 17.35%, rgba(22, 71, 113, 0.0001) 92%);
	mix-blend-mode: normal;
	opacity: 0.5;
}

.banner .b1 {
	margin-bottom: 0.5em;
}

@media (max-width: 767px) {
	.banner {
		min-height: 26em;
	}

	.banner::before {
		height: 19.8em;
	}
}

@media (max-width: 480px) {
	.banner {
		min-height: 19em;
	}

	.banner::before {
		height: 18.8em;
	}
}