/* Highlights. Figma 2410:58421 desktop (row, 64 gap, centred), 2410:58612 mobile (stack, 32 gap). */

.highlights__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px 64px;
}

.highlight {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 228px;
}

.highlight__top {
	display: flex;
	align-items: center;
	gap: 6px;
}

.highlight__icon { --icon-size: 40px; color: var(--c-secondary); }

.highlight__figure {
	font: var(--f-header-xl);
	color: var(--c-text-dark);
	white-space: nowrap;
}

.highlight__bottom {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.highlight__title { font: var(--f-subtitle-l); color: var(--c-text-dark); }
.highlight__text { font: var(--f-subtitle-m); color: var(--c-text-grey); }

@media (max-width: 767px) {
	.highlights__list {
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 32px;
	}
}