/* Home – How it works (Figma 1828:12499, 1600×526: 80px top/bottom, content 1280). */

.rs-home-steps__grid {
	border-top: 1px solid #ece9f2;
	align-items: stretch;
}

.rs-step {
	box-sizing: border-box;
	border-right: 1px solid #ece9f2;
}

.rs-step:last-child {
	border-right: 0;
}

.rs-step > * {
	margin: 0;
}

.rs-step__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 18px;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
}

.rs-step__num.is-purple { background: #ede7fa; color: #5f27c7; }
.rs-step__num.is-green { background: #ddf6ee; color: #0e8a73; }
.rs-step__num.is-orange { background: #fcebdc; color: #b4682b; }

/* Figma puts 8.7px above each step title (inside the 8px-gap column). */
.rs-step > .rs-step__title {
	padding-top: 8.7px;
}

@media (max-width: 781px) {
	.rs-home-steps__grid {
		grid-template-columns: 1fr !important;
	}

	.rs-step {
		border-right: 0;
		border-bottom: 1px solid #ece9f2;
		padding-inline: 0 !important;
	}

	.rs-step:last-child {
		border-bottom: 0;
	}
}