.degmen-site-how-it-works {
	--degmen-section-background: var(--degmen-bg-surface);
	color: var(--degmen-text-primary);
}

.degmen-site-how-it-works .degmen-site-how-it-works__inner {
	padding-block: var(--degmen-section-block);
}

.degmen-site-how-it-works .degmen-site-how-it-works__header {
	max-width: 48rem;
	margin-inline: auto;
	text-align: center;
}

.degmen-site-how-it-works .degmen-site-how-it-works__description {
	margin: 1rem auto 0;
}

.degmen-site-how-it-works .degmen-site-how-it-works__steps {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin: clamp(2.25rem, 3.25vw, 3rem) 0 0;
	padding: 0;
	list-style: none;
}

.degmen-site-how-it-works.degmen-site-how-it-works--steps-4 .degmen-site-how-it-works__steps,
.degmen-site-how-it-works.degmen-site-how-it-works--steps-8 .degmen-site-how-it-works__steps {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.degmen-site-how-it-works.degmen-site-how-it-works--steps-6 .degmen-site-how-it-works__steps {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.degmen-site-how-it-works .degmen-site-how-it-works__step {
	position: relative;
	min-width: 0;
	text-align: center;
}

.degmen-site-how-it-works .degmen-site-how-it-works__marker {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3.25rem;
}

.degmen-site-how-it-works .degmen-site-how-it-works__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	border: 1px solid var(--degmen-icon-border);
	border-radius: 50%;
	background: var(--degmen-icon-bg);
	color: var(--degmen-icon-glyph);
}

.degmen-site-how-it-works .degmen-site-how-it-works__icon svg {
	width: 1.55rem;
	height: 1.55rem;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.7;
}

.degmen-site-how-it-works .degmen-site-how-it-works__step-title {
	margin: 1.125rem 0 0;
	color: var(--degmen-text-primary);
	font-size: clamp(1rem, 1.2vw, 1.125rem);
	font-weight: 700;
	line-height: 1.35;
}

.degmen-site-how-it-works .degmen-site-how-it-works__step-description {
	margin: 0.625rem 0 0;
	color: var(--degmen-text-muted);
	font-size: 0.9375rem;
	line-height: 1.65;
}

@media (max-width: 64rem) {
	.degmen-site-how-it-works.degmen-site-how-it-works--steps-4 .degmen-site-how-it-works__steps,
	.degmen-site-how-it-works.degmen-site-how-it-works--steps-6 .degmen-site-how-it-works__steps,
	.degmen-site-how-it-works.degmen-site-how-it-works--steps-8 .degmen-site-how-it-works__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.5rem 2rem;
	}
}

@media (max-width: 47.99rem) {
	.degmen-site-how-it-works.degmen-site-how-it-works--steps-4 .degmen-site-how-it-works__steps,
	.degmen-site-how-it-works.degmen-site-how-it-works--steps-6 .degmen-site-how-it-works__steps,
	.degmen-site-how-it-works.degmen-site-how-it-works--steps-8 .degmen-site-how-it-works__steps {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.75rem;
		margin-block-start: 2rem;
	}

	.degmen-site-how-it-works .degmen-site-how-it-works__step {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 1rem;
		text-align: start;
	}

	.degmen-site-how-it-works .degmen-site-how-it-works__marker {
		grid-row: 1 / span 2;
		align-items: flex-start;
		min-height: 0;
	}

	.degmen-site-how-it-works .degmen-site-how-it-works__step-title {
		margin-block-start: 0;
	}

	.degmen-site-how-it-works .degmen-site-how-it-works__step-description {
		grid-column: 2;
		margin-block-start: 0.4rem;
	}
}

@media (max-width: 29.99rem) {
	.degmen-site-how-it-works .degmen-site-how-it-works__icon {
		width: 3rem;
		height: 3rem;
	}
}