.how-it-works {
	background-color: var(--color-cream-warm);
}
.how-it-works .steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    counter-reset: s;
}

.how-it-works .step {
	position: relative;
	padding: 30px 24px 24px;
	background: #fff;
	border: 1px solid var(--color-cream-warm);
	border-radius: var(--radius);
}
.how-it-works .step::before {
	counter-increment: s;
	content: counter(s);
	position: absolute;
	top: -18px;
	left: 24px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-forest);
	color: #fff;
	font-family: var(--font-heading);
	font-size: 21px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 14px rgba(21,64,61,.25);
}

.how-it-works .step h3 {
	margin: 8px 0 6px;
	font-size: 21px;
	color: var(--color-forest-deep);
}

.how-it-works .step p {
	margin: 0;
	font-size: 17px;
	color: var(--color-stone);
}

@media (max-width: 880px) {
    .how-it-works .steps {
        grid-template-columns: 1fr;
        gap: 34px;
    }
}