.steps-life-section {
	display: flex;
	flex-flow: column;
	padding: 64px 16px;

	@include tablet {
		padding: 40px 16px;
	}

	@include mobile {
		padding: 32px 16px;
	}
}

.steps-life-section__main {
	display: flex;
	flex-flow: column;
	align-self: center;
	gap: 48px;
	width: 100%;
	max-width: 1088px;

	@include tablet {
		gap: 32px;
		max-width: 736px;
	}

	@include mobile {
		gap: 16px;
		max-width: 328px;
	}
}

.steps-life-section__head {
	display: flex;
	flex-flow: column;
	align-self: center;
	gap: 8px;
	max-width: 640px;
	text-align: center;

	@include tablet {
		gap: 4px;
		max-width: 480px;
	}

	@include mobile {
		max-width: 328px;
	}
}

.steps-life-section__head__title {
	font-family: $font-title;
	font-size: 42px;
	line-height: 46px;
	letter-spacing: 0.02em;

	@include tablet {
		font-size: 32px;
		line-height: 36px;
	}

	@include mobile {
		font-size: 24px;
		line-height: 28px;
	}
}

.steps-life-section__head__desc {
	font-size: 18px;
	font-weight: 300;
	line-height: 28px;

	@include tablet {
		font-size: 15px;
		line-height: 21px;
	}

	@include mobile {
		font-size: 13px;
		line-height: 19px;
	}
}

.steps-life-section__grid {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 32px;

	@include tablet {
		gap: 16px;
	}

	@include mobile {
		flex-flow: column;
		align-items: center;
		align-self: center;
		max-width: 220px;
	}
}

.steps-life-section__item {
	display: flex;
	flex-flow: column;
	align-items: center;
	flex: 0 0 calc(100% / 3 - 32px);

	@include tablet {
		flex: 0 0 calc(100% / 3 - 16px);
	}

	@include mobile {
		flex: unset;
		max-width: 220px;
	}
}

.steps-life-section__item__icon {
	position: relative;
	width: 128px;
	height: 128px;
	border-radius: 50%;
	border: 2px solid $color-black-200;

	svg {
		width: 100%;
		height: 100%;
	}

	&::after {
		content: attr(data-num);
		position: absolute;
		left: 50%;
		bottom: -16px;
		transform: translateX(-50%);
		padding: 0 8px;
		font-family: $font-title;
		font-weight: 400;
		font-size: 32px;
		line-height: 32px;
		color: #e2dad1;
		background-color: white;
	}

	@include tablet {
		width: 96px;
		height: 96px;

		&::after {
			bottom: -12px;
			padding: 0 6px;
			font-size: 24px;
			line-height: 24px;
		}
	}
}

.steps-life-section__item__title {
	margin-top: 20px;
	font-size: 18px;
	line-height: 22px;
	text-align: center;

	@include tablet {
		font-size: 15px;
		line-height: 15px;
	}
}

.steps-life-section__item__desc {
	margin-top: 8px;
	font-size: 16px;
	font-weight: 300;
	line-height: 24px;
	text-align: center;
	letter-spacing: 0.02em;

	@include tablet {
		font-size: 13px;
		line-height: 17px;
	}
}