website/sass/page/features.scss

.video-container {
	background: var(--color-fog);

	> div {
		margin: calc(20 * var(--variable-px)) auto;
		width: 100%;
		max-width: 800px;
	}
}

#roadmap {
	width: 100%;
	text-align: center;
}

.roadmap {
	margin: auto;
	margin-top: 20px;
	padding: 0 16px;

	.feature-icons {
		flex-direction: column;
		gap: 0;
		width: 100%;
		margin-bottom: 0;

		.feature-icon {
			position: relative;
			padding-left: calc(16px + 8px);

			&::before {
				content: "";
				position: absolute;
				left: 0;
				width: 4px;
				height: 100%;
				background: #ddd;
			}

			&:first-of-type::before {
				bottom: 0;
				height: 50%;
			}

			&:last-of-type::before {
				top: 0;
				height: 50%;
			}

			&::after {
				content: "";
				position: absolute;
				left: calc((24px - 4px) / -2);
				width: 24px;
				height: 24px;
				border-radius: 24px;
			}

			&[data-year]::after {
				content: attr(data-year);
				width: auto;
				line-height: 1.4;
				text-indent: 28px;
				padding-right: 12px;
			}

			&.complete::after {
				background: var(--color-seaside);
				background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="%2316323f"><polygon points="6.69 14.57 0 9 1.8 6.84 6.32 10.61 13.83 1.43 16 3.2 6.69 14.57" /></svg>');
				background-repeat: no-repeat;
				background-position: 4px center;
			}

			&.ongoing::after {
				background: var(--color-lemon);
				background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="%2316323f"><path d="m8,2c3.31,0,6,2.69,6,6s-2.69,6-6,6-6-2.69-6-6,2.69-6,6-6m0-2C3.58,0,0,3.58,0,8s3.58,8,8,8,8-3.58,8-8S12.42,0,8,0h0Zm2.83,9.41l-1.83-1.83v-2.59c0-.55-.45-1-1-1s-1,.45-1,1v3c0,.13.03.26.08.38.05.12.12.23.22.33l2.12,2.12c.2.2.45.29.71.29s.51-.1.71-.29c.39-.39.39-1.02,0-1.41Z" /></svg>');
				background-repeat: no-repeat;
				background-position: 4px center;
			}

			&:not(.complete, .ongoing)::after {
				background: #ddd;
				background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="%23fff"><circle cx="8" cy="8" r="8" /></svg>');
				background-repeat: no-repeat;
				background-position: 4px center;
			}

			&.heading {
				background: none;

				h3 {
					width: 100%;
					text-align: center;
				}
			}
		}
	}
}