/**
 * Benefits strip — Figma 1920-Portfolio → "Benefits".
 *
 * The card is wider than the usual 1408 content column (1520 at 1920), so
 * it gets its own max-width; from 1240 down it falls back to the container.
 */

.spc-benefits__container {
	max-width: calc(1520px + 2 * var(--spc-gutter));
}

.spc-benefits__strip {
	display: flex;
	align-items: stretch;
	margin: 0;
	padding: 32px 64px;
	border-radius: 32px;
	background: var(--sp-white);
	list-style: none;
}

.spc-benefits__item {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding-inline: 64px;
	text-align: center;
}

.spc-benefits__item + .spc-benefits__item {
	border-left: 1px solid var(--sp-border);
}

.spc-benefits__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: var(--sp-gold-tint);
}

.spc-benefits__icon .spc-icon {
	width: 24px;
	height: 24px;
}

@media (max-width: 1239px) {
	.spc-benefits__strip {
		padding: 32px;
	}

	.spc-benefits__item {
		padding-inline: 32px;
	}
}

@media (max-width: 767px) {
	.spc-benefits__strip {
		flex-direction: column;
		gap: 32px;
		padding: 32px 16px;
	}

	.spc-benefits__item {
		padding-inline: 0;
	}

	.spc-benefits__item + .spc-benefits__item {
		border-left: 0;
		border-top: 1px solid var(--sp-border);
		padding-top: 32px;
	}
}