/* /cryptowealth: "Advice shaped around you" (patterns/wealth-services.php). */
.sp-wl-services {
	scroll-margin-top: 71px;
	background: var(--wp--preset--color--white);
}
@media (min-width: 1024px) {
	.sp-wl-services { scroll-margin-top: 99px; }
}
.sp-wl-services .sp-wl-services__inner { padding-top: 40px; padding-bottom: 64px; }
@media (min-width: 1024px) {
	.sp-wl-services .sp-wl-services__inner { padding-top: 43px; padding-bottom: 72px; }
}
.sp-wl-services .sp-wl-services__grid {
	display: grid;
	gap: 24px;
	margin-top: 32px;
}
@media (min-width: 1024px) {
	.sp-wl-services .sp-wl-services__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 37px; }
}

.sp-wl-services .sp-wl-card {
	position: relative;
	min-height: 320px;
	margin: 0;
	padding: 42px 29px 40px;
	border-left: 3px solid var(--wp--preset--color--primary);
}
@media (min-width: 1024px) {
	.sp-wl-services .sp-wl-card { height: 371px; }
}
/* The design's stepped card shape, in grey at 10%. */
.sp-wl-services .sp-wl-card__shape {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: -3px;
	background: rgba(169, 169, 169, 0.1);
}
.sp-wl-services .sp-wl-card > :not(.sp-wl-card__shape) { position: relative; }
.sp-wl-services .sp-wl-card__icon { display: block; line-height: 0; }
.sp-wl-services .sp-wl-card__icon svg { display: block; height: auto; }
.sp-wl-services .sp-wl-card--1 .sp-wl-card__icon,
.sp-wl-services .sp-wl-card--3 .sp-wl-card__icon { color: var(--wp--preset--color--google-blue); }
.sp-wl-services .sp-wl-card--2 .sp-wl-card__icon { color: var(--wp--preset--color--primary); }

.sp-wl-services .sp-wl-card__title.sp-wl-card__title {
	max-width: 330px;
	margin: 15px 0 0;
	font-size: 32px;
	line-height: 41px;
	font-weight: 500;
	color: var(--wp--preset--color--black-light);
}
/* Body width per card, as in the design, so the lines break the same way. */
.sp-wl-services .sp-wl-card__text {
	margin: 15px 0 0;
	font-size: 14px;
	line-height: 22px;
	color: #666666;
}
.sp-wl-services .sp-wl-card--1 .sp-wl-card__text { max-width: 340px; }
.sp-wl-services .sp-wl-card--2 .sp-wl-card__text { max-width: 366px; }
.sp-wl-services .sp-wl-card--3 .sp-wl-card__text { max-width: 312px; }
@media (min-width: 1024px) {
	.sp-wl-services .sp-wl-card--2 .sp-wl-card__text { margin-right: -16px; }
}