.kok-timeline { display: grid; gap: var(--space-9); justify-items: center; }
.kok-timeline__heading { margin: 0; font: var(--type-h3); font-weight: 700; font-variant: normal; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--kok-beige-300); }
.kok-timeline__list { position: relative; list-style: none; margin: 0; padding: var(--space-9) 0; width: 100%; max-width: 980px; display: grid; gap: var(--space-10); }
.kok-timeline__list::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--kok-red-500); transform: translateX(-.5px); }
.kok-timeline__list::after, .kok-timeline__list li::before, .kok-timeline__list li::after { content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--kok-red-500); left: 50%; transform: translate(-50%, -50%); }
.kok-timeline__list::after { top: 0; }
.kok-timeline__list > li:last-child::after { top: auto; bottom: 0; transform: translate(-50%, 50%); }
.kok-timeline__list li { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.kok-timeline__list li::before { top: 50%; }
.kok-timeline__list li::after { display: none; }
.kok-timeline__list li:last-child::after { display: block; }
.kok-timeline__list li p { position: relative; margin: 0; text-align: center; font: var(--type-body-sm); letter-spacing: var(--ls-smallcaps); color: var(--kok-beige-200); }
.kok-timeline__list li p::before { content: ""; position: absolute; top: 50%; width: 46px; height: 1px; background: var(--kok-red-500); }
.kok-timeline__list li.is-left p { grid-column: 1; padding-right: 66px; }
.kok-timeline__list li.is-left p::before { right: 0; }
.kok-timeline__list li.is-right p { grid-column: 2; padding-left: 66px; }
.kok-timeline__list li.is-right p::before { left: 0; }
.kok-timeline__list strong { font-weight: 700; color: var(--kok-beige-050); }
@media (max-width: 700px) {
	.kok-timeline__list::before, .kok-timeline__list::after, .kok-timeline__list li::before, .kok-timeline__list li::after, .kok-timeline__list li p::before { left: 4px; }
	.kok-timeline__list li { grid-template-columns: 1fr; }
	.kok-timeline__list li.is-left p, .kok-timeline__list li.is-right p { grid-column: 1; padding: 0 0 0 40px; text-align: left; }
	.kok-timeline__list li p::before { display: none; }
}