Список со змейкой с помощью css

Для того, чтобы сделать список со змейкой добавим следующую html-разметку:

<div class="container">
	<div class="production-wrapper">
		<div class="border-left production">
			<div class="row align-items-center">
				<div class="col-auto numeric">
					1.
				</div>
				<div class="col">
					<h2>Заголовок</h2>
					Какой-то невероятный текст
				</div>
			</div>
		</div>
		<div class="border-right production">
			<div class="row align-items-center">
				<div class="col">
					<h2>Заголовок</h2>
					Какой-то невероятный текст
				</div>
				<div class="col-auto numeric">
					2.
				</div>
			</div>
		</div>
		<div class="border-left production">
			<div class="row align-items-center">
				<div class="col-auto numeric">
					3.
				</div>
				<div class="col">
					<h2>Заголовок</h2>
					Какой-то невероятный текст
				</div>
			</div>
		</div>
		<div class="border-right production">
			<div class="row align-items-center">
				<div class="col">
					<h2>Заголовок</h2>
					Какой-то невероятный текст
				</div>
				<div class="col-auto numeric">
					4.
				</div>
			</div>
		</div>
		<div class="border-left production">
			<div class="row align-items-center">
				<div class="col-auto numeric">
					5.
				</div>
				<div class="col">
					<h2>Заголовок</h2>
					Какой-то невероятный текст
				</div>
			</div>
		</div>
	</div>
</div>

А это необходимые css-стили:

*, ::after, ::before {
            box-sizing: border-box;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        .row {
            --bs-gutter-x: 1.5rem;
            --bs-gutter-y: 0;
            display: flex;
            flex-wrap: wrap;
            margin-top: calc(var(--bs-gutter-y) * -1);
            margin-right: calc(var(--bs-gutter-x) * -0.5);
            margin-left: calc(var(--bs-gutter-x) * -0.5);
        }
        .row > * {
            box-sizing: border-box;
            flex-shrink: 0;
            width: 100%;
            max-width: 100%;
            padding-right: calc(var(--bs-gutter-x) * 0.5);
            padding-left: calc(var(--bs-gutter-x) * 0.5);
            margin-top: var(--bs-gutter-y);
        }
        .align-items-center {
            align-items: center;
        }

        .numeric {
            font-weight: 200;
            font-size: 64px;
            line-height: 64px;
            color: #CE2525;
            margin-right: 20px;
        }
        .production h2 {
            font-weight: 600;
            font-size: 18px;
            line-height: 24px; 
		}
        .production .numeric {
            margin-right: 0; 
		}
	.production {
			padding: 60px 0;
			position: relative; 
		}
		.production .row {
			width: calc(100% + 200px);
			position: relative; }
		.production:nth-of-type(1) .row:before {
			content: '';
			display: block;
			border-bottom: 2px dashed #CE2525;
			width: 95px;
			position: absolute;
			right: 0;
			top: -62px; }
		.production:last-child .row:before {
			content: '';
			display: block;
			border-bottom: 2px dashed #CE2525;
			width: 95px;
			position: absolute;
			right: 0;
			bottom: -62px; }
		.border-left {
			width: calc(100% - 200px);
			margin-left: 100px;
			border-top: 2px dashed #CE2525;
			border-bottom: 2px dashed #CE2525; }
		.border-left .row {
			margin-left: -100px !important; }
		.border-left:after {
			content: '';
			position: absolute;
			left: -100px;
			width: 100px;
			height: calc(100% + 4px);
			top: -2px;
			display: block;
			border-left: 2px dashed #CE2525;
			border-bottom: 2px dashed #CE2525;
			border-top: 2px dashed #CE2525;
			border-radius: 100px 0 0 100px; }
		.border-left:before {
			top: 50%;
			margin-top: -7px;
			z-index: 1;
			content: '';
			display: inline-block;
			position: absolute;
			width: 14px;
			height: 14px;
			background: #333333;
			border: 4px solid #fff;
			left: -107px;
			-webkit-box-shadow: 0px 0px 0px 2px #ce2525;
			-moz-box-shadow: 0px 0px 0px 2px #ce2525;
			box-shadow: 0px 0px 0px 2px #ce2525; 
			}
		.border-right {
			width: calc(100% - 200px); }
		.border-right:before {
			content: '';
			position: absolute;
			right: -202px;
			width: 100px;
			height: calc(100% + 4px);
			top: -2px;
			display: block;
			border-right: 2px dashed #CE2525;
			border-bottom: 2px dashed #CE2525;
			border-top: 2px dashed #CE2525;
			border-radius: 0 100px 100px 0; }
		.border-right:after {
			top: 50%;
			margin-top: -7px;
			z-index: 1;
			content: '';
			display: inline-block;
			position: absolute;
			width: 14px;
			height: 14px;
			background: #333333;
			border: 4px solid #fff;
			right: -207px;
			-webkit-box-shadow: 0px 0px 0px 2px #ce2525;
			-moz-box-shadow: 0px 0px 0px 2px #ce2525;
			box-shadow: 0px 0px 0px 2px #ce2525; 
			}
        .col-auto {
            flex: 0 0 auto;
            width: auto;
        }
        .col {
            flex: 1 0 0;
        }