/* Mission. Figma 2190:46913 desktop (3 x 390 cards, 25 gap), 2190:47103 mobile (stack, 16 gap). */

.mission .section-head { margin-bottom: 24px; }

.mission__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 25px;
}

@media (min-width: 1024px) {
	.mission__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* card/mission: grey band behind the top of the icon. */
.mission__card {
	--band: 96px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
	padding: 32px 32px 32px;
	border: 1px solid var(--c-border-light);
	border-radius: var(--r-m);
	background: linear-gradient(var(--c-bg-grey) 0 var(--band), var(--c-bg-white) var(--band));
}

.mission__icon { --icon-size: 84px; color: var(--c-primary); }

.mission__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mission__title { font: var(--f-header-s); color: var(--c-text-dark); }
.mission__text { font: var(--f-body-m); color: var(--c-text-dark); }

@media (max-width: 767px) {
	.mission__list { gap: 16px; }

	.mission__card {
		--band: 56px;
		padding: 16px 16px 16px;
	}

	.mission__icon { --icon-size: 52px; }
	.mission__title { font: var(--f-header-xs); }
	.mission__text { font: var(--f-body-s); }
}