/*
 * Image with Text – Howe Green House's inset panel (blocks/image-text): the
 * photo covers the band and a panel in --landing-panel-bg at 80% sits over
 * it, running the band's full height. The panel's copy is airier than the
 * page's – wider tracking, taller lines – as Howe Green's is. The button on
 * it is outlined (css/base/blocks.css).
 */
.imageInset {
	position: relative;
	overflow: hidden;
	background: var(--landing-text);
	color: var(--landing-panel-text);

	@media (min-width: 992px) {
		min-height: 480px;
	}

	.imageInset-image {
		position: absolute;
		inset: 0;

		img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.container,
	.row {
		position: relative;
		min-height: inherit;
	}

	.row > [class*="col-"] {
		display: flex;
	}

	.imageInset-panel {
		flex: 1 1 auto;
		padding: 50px 30px 40px;
		background: color-mix(in srgb, var(--landing-panel-bg) 80%, transparent);

		@media (min-width: 1590px) {
			padding: 60px 55px 50px;
		}

		.sectionTitle,
		:is(h2, h3, h4, h5, h6) {
			color: var(--landing-panel-text);
		}

		h3 {
			margin-top: 26px;
		}

		p {
			letter-spacing: 0.055em;
			line-height: 1.66;
		}

		a:not(.button) {
			color: inherit;
			text-decoration: underline;
		}

		.button {
			margin-top: 10px;
		}

		> :last-child {
			margin-bottom: 0;
		}
	}
}