Milestone

.pds-milestone-list {
	--milestone-gap: var(--pds-spacing-l);
	--milestone-inset: var(--pds-spacing-2xl);
	--milestone-list-line-color: var(--pds-color-border-separator);

	display: flex;
	flex-direction: column;
	gap: var(--milestone-gap);
	list-style: none;
	margin: 0;
	padding-block: var(--pds-spacing-l);
	padding-inline-start: var(--milestone-inset);
	position: relative;
}

/* One line down the whole list, with the milestones' dots on it. The inset is
   the space between the line and the cards; each milestone reads it to place
   its dot on the line. */
.pds-milestone-list::before {
	background-color: var(--milestone-list-line-color);
	bottom: 0;
	content: '';
	inset-inline-start: calc(-1 * var(--pds-border-width-default) / 2);
	position: absolute;
	top: 0;
	width: var(--pds-border-width-default);
}

.pds-milestone-list__entry {
	list-style: none;
}

/* Subtitles at the start need a gutter left of the line for them. */
@media (min-width: 480px) {
	.pds-milestone-list--subtitle-start {
		--milestone-meta-width: var(--pds-spacing-7xl);

		margin-inline-start: calc(
			var(--milestone-meta-width) + var(--pds-spacing-m) + var(--pds-spacing-s)
		);
	}
}