.learning {
	> .container {
		padding-block: var(--clamp-40-20);
	}

	> .container > .content {
		display: flex;
		flex-direction: column;
		gap: var(--clamp-40-20);

		.title {
			font-size: var(--clamp-48-28);
			font-weight: 800;
			line-height: 1.3;
			color: var(--black);
		}

		.steps {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
			gap: 0;
			width: 100%;
			margin: 0;
			padding: 0;
			list-style: none;
		}

		.step {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;

			&:not(:last-child)::after {
				content: "";
				position: absolute;
				top: calc(var(--clamp-50-30) / 2);
				left: calc(50% + 18px);
				right: calc(-50% + 18px);
				border-top: 3px dotted var(--blue);
				z-index: 0;
			}

			.number {
				position: relative;
				z-index: 1;

				display: inline-flex;
				align-items: center;
				justify-content: center;

				width: var(--clamp-50-30);
				height: var(--clamp-50-30);
				margin-bottom: var(--clamp-30-10);

				border-width: 1px;
				border-style: solid;
				border-color: var(--blue);
				border-radius: 50%;
				background-color: var(--white);

				font-size: var(--clamp-34-20);
				font-weight: 400;
				line-height: 1;
				color: var(--black);
			}

			.title {
				max-width: 160px;
				margin-bottom: 4px;

				font-size: var(--clamp-18-14);
				font-weight: 800;
				line-height: 1.25;
				color: var(--black);
			}

			.description {
				max-width: 160px;

				font-size: var(--clamp-16-12);
				font-weight: 400;
				line-height: 1.25;
				color: var(--black-a40);
			}
		}
	}
}

@media (max-width: 999px) {
	.learning {
		> .container > .content {
			.steps {
				--steps-gap: 30px;
				display: flex;
				flex-direction: column;
/* 				gap: var(--clamp-30-10); */
				gap: var(--steps-gap);
			}

			.step {
				display: grid;
				grid-template-columns: 32px 1fr;
				column-gap: var(--clamp-20-10);
				row-gap: 4px;
				align-items: start;
				text-align: left;

				&:not(:last-child)::after {
					top: 0;
					left: calc(var(--clamp-50-30) / 2);
					right: auto;
/* 					bottom: calc(-1 * var(--clamp-30-10)); */
					bottom: calc(-1 * var(--steps-gap));
					width: 0;
					border-top: 0;
					border-left: 2px dotted var(--blue);
				}

				.number {
					grid-column: 1;
					grid-row: 1 / span 2;
					margin-bottom: 0;
				}

				.title {
					grid-column: 2;
					max-width: none;
					margin-bottom: 0;
				}

				.description {
					grid-column: 2;
					max-width: none;
				}
			}
		}
	}
}