/*
 * Banner – Howe Green House's hero: 580px tall on a phone or tablet, then
 * nine tenths of the screen's height from 992px (never under 680px). Image
 * and video share the frame: the banner sets the height, the media covers it.
 */
#pageBanner {
	position: relative;
	overflow: hidden;
	height: 580px;
	background: var(--landing-text);

	@media (min-width: 992px) {
		height: 90vh;
		min-height: 680px;
	}

	.bannerImage,
	.videoframe {
		position: absolute;
		inset: 0;
	}

	.bannerImage img,
	.videoframe video {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}