/* H-Lead Image + Text.
 * Figma: 'vision' (row, 1558x672, gap 203, space-evenly) and 'categories'
 * (columns, 1557x590, gap 21) frames, 04. H-lead_about_desktop_v1 /
 * 04. H-lead_about_mobile_v1. Offset bordered rectangle sits behind the
 * image (placeholder-bg fill, grey-900 1px stroke, radius 16). */

.hl-image-text {
	display: flex;
	gap: var(--hl-space-24);
}

.hl-image-text--row {
	flex-direction: column;
}

.hl-image-text--row .hl-image-text__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hl-space-56);
}

.hl-image-text--row .hl-image-text__item--reverse {
	flex-direction: row-reverse;
}

.hl-image-text--columns {
	flex-wrap: wrap;
	align-items: flex-start;
}

.hl-image-text--columns .hl-image-text__item {
	display: flex;
	flex-direction: column;
	gap: var(--hl-space-32);
	flex: 1 1 0;
	min-width: 280px;
}

.hl-image-text__media {
	position: relative;
	flex: 0 0 auto;
	width: 100%;
}

.hl-image-text--row .hl-image-text__media {
	max-width: 49%;
}

.hl-image-text__image {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 398px;
	object-fit: cover;
	border-radius: var(--hl-radius-16) !important;
}

.hl-image-text--row .hl-image-text__image {
	height: 520px;
	border-radius: var(--hl-radius-16) !important;
}

.hl-image-text__text {
	display: flex;
	flex-direction: column;
	gap: var(--hl-space-8);
}

.hl-image-text--row .hl-image-text__text {
	max-width: 632px;
}

.hl-image-text__body {
	margin: 0;
	color: var(--hl-color-grey-600);
	font-size: 20px;
	line-height: 30px;
}

.hl-image-text__heading {
	margin: 0;
	color: var(--hl-color-brand-700);
	font-size: 36px;
	line-height: 44px;
	font-weight: 700;
}

.hl-image-text--columns .hl-image-text__heading {
	font-size: 24px;
	line-height: 32px;
}

@media (max-width: 991px) {

	.hl-image-text--row .hl-image-text__item,
	.hl-image-text--row .hl-image-text__item--reverse {
		flex-direction: column;
		gap: var(--hl-space-24);
	}

	.hl-image-text--row .hl-image-text__media {
		max-width: 100%;
	}

	.hl-image-text--row .hl-image-text__image {
		height: 410px;
	}

	.hl-image-text--columns {
		flex-direction: column;
	}

	.hl-image-text--columns .hl-image-text__item {
		min-width: 0;
	}

	.hl-image-text__image {
		height: 327px;
	}

	/* Figma mobile: row heading "Our Vision" 24/38, columns headings 20/30 */
	.hl-image-text__heading {
		font-size: 24px;
		line-height: 38px;
	}

	.hl-image-text--columns .hl-image-text__heading {
		font-size: 20px;
		line-height: 30px;
	}

	.hl-image-text__body {
		font-size: 18px;
		line-height: 28px;
	}
}