.dodd-timeline {
	--dodd-timeline-columns: repeat(3, minmax(0, 1fr));
	--dodd-timeline-rows: auto;
	--dodd-timeline-column-gap: 32px;
	--dodd-timeline-row-gap: 32px;
	--dodd-timeline-card-min-height: 180px;
	--dodd-timeline-line-color: #231f20;
	--dodd-timeline-line-thickness: 4px;
	--dodd-timeline-line-position: 50%;
	--dodd-timeline-line-inset: 0px;
	--dodd-timeline-line-top: var(--dodd-timeline-line-position);
	--dodd-timeline-line-right: var(--dodd-timeline-line-inset);
	--dodd-timeline-line-bottom: auto;
	--dodd-timeline-line-left: var(--dodd-timeline-line-inset);
	--dodd-timeline-line-width: auto;
	--dodd-timeline-line-height: var(--dodd-timeline-line-thickness);
	--dodd-timeline-line-transform: translateY(-50%);
	position: relative;
	display: grid;
	grid-template-columns: var(--dodd-timeline-columns);
	grid-template-rows: var(--dodd-timeline-rows);
	column-gap: var(--dodd-timeline-column-gap);
	row-gap: var(--dodd-timeline-row-gap);
	align-items: stretch;
	isolation: isolate;
}

.dodd-timeline::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: var(--dodd-timeline-line-top);
	right: var(--dodd-timeline-line-right);
	bottom: var(--dodd-timeline-line-bottom);
	left: var(--dodd-timeline-line-left);
	width: var(--dodd-timeline-line-width);
	height: var(--dodd-timeline-line-height);
	background: var(--dodd-timeline-line-color);
	transform: var(--dodd-timeline-line-transform);
	pointer-events: none;
}

.dodd-timeline__card {
	position: relative;
	z-index: 1;
	min-width: 0;
	min-height: var(--dodd-timeline-card-min-height);
	background: #fff;
	border-radius: 8px;
	padding: 24px;
}

.dodd-timeline__card-inner {
	min-width: 0;
	height: 100%;
}

.dodd-timeline__card-inner > :first-child {
	margin-top: 0;
}

.dodd-timeline__card-inner > :last-child {
	margin-bottom: 0;
}