/**
 * Sekcja: cztery obietnice usługi.
 * Figma 14557:3155 — pas 1440×328 na białym, kontener 1284×166 z marginesem 81/81,
 * cztery karty 303×166 z odstępem 24, obwódka mięta, ikona 42×42 w prawym górnym
 * narożniku (wnętrze 18/20), tekst 20/28 od y=92.
 */

.usluga-intro {
	background-color: var(--color-surface);
	padding-block: 81px;
}

.usluga-intro__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.usluga-intro__item {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	min-height: 166px;

	/* Współrzędne z Figmy (ikona od y=18, kolumna tekstu 263 przy karcie 303) liczą się
	   od zewnętrznej krawędzi karty, a obwódka 1 px leży w środku — stąd 17/19, nie 18/20. */
	padding: 17px 19px;
	border: 1px solid var(--color-border-mint);
	border-radius: var(--radius-sm);
}

.usluga-intro__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: var(--radius-sm);
	background-color: var(--color-chip-mint);
	color: var(--color-primary);
}

.usluga-intro__icon-img {
	display: block;
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.usluga-intro__text {
	width: 100%;
	margin: 32px 0 0;
	font-family: var(--font-display);
	font-size: var(--fs-h6);
	line-height: var(--lh-h5);
	letter-spacing: var(--ls-heading);
	color: var(--color-black);
}

@media (max-width: 991px) {
	.usluga-intro__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 575px) {
	.usluga-intro__list {
		grid-template-columns: minmax(0, 1fr);
	}
}