/* H-Lead Icon Cards.
 * Figma: 'technology-driven-growth' (bordered, 770x330 off-white cards,
 * 2 col, gap 20) and 'core-values' (plain, 370x352, 4 col, space-evenly,
 * gap 40) frames, 04. H-lead_about_desktop_v1 / mobile. */

.hl-icon-cards {
	display: flex;
	flex-direction: column;
	gap: var(--hl-space-56);
}

.hl-icon-cards__title {
	margin: 0;
	color: var(--hl-color-brand-700);
	font-size: 36px;
	line-height: 44px;
	font-weight: 700;
	text-align: center;
}

.hl-icon-cards__list {
	display: flex;
	gap: var(--hl-space-40);
}

.hl-icon-cards--cols-2 .hl-icon-cards__list {
	gap: var(--hl-space-20);
}

.hl-icon-cards__card {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: var(--hl-space-32);
}

.hl-icon-cards--plain .hl-icon-cards__card {
	align-items: start;
	text-align: left;
}

.hl-icon-cards--bordered .hl-icon-cards__card {
	padding: var(--hl-space-32) var(--hl-space-24);
	border-radius: 20px;
	background: var(--hl-color-off-white);
	border: 1px solid var(--hl-color-grey-200);
}

.hl-icon-cards__icon {
	width: 100px;
	height: 100px;
	object-fit: contain;
}

.hl-icon-cards--bordered .hl-icon-cards__icon {
	align-self: flex-start;
}

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

.hl-icon-cards__body {
	margin: 0;
	color: var(--hl-color-grey-600);
	font-size: 20px;
	line-height: 30px;
	text-align: left;
}

.hl-icon-cards__heading {
	margin: 0;
	color: var(--hl-color-brand-700);
	font-size: 24px;
	line-height: 32px;
	font-weight: 700;
}

.hl-icon-cards--plain .hl-icon-cards__heading {
	font-size: 24px;
}

@media (max-width: 991px) {
	.hl-icon-cards__list {
		flex-direction: column;
	}

	.hl-icon-cards--plain .hl-icon-cards__card {
		align-items: center;
		text-align: center;
	}

	.hl-icon-cards__body {
		text-align: center;
	}

	.hl-icon-cards__title {
		font-size: 24px;
		line-height: 32px;
	}

	.hl-icon-cards__heading,
	.hl-icon-cards--plain .hl-icon-cards__heading {
		font-size: 20px;
		line-height: 30px;
	}

	.hl-icon-cards__body {
		font-size: 18px;
		line-height: 28px;
	}
}