.lcms-timeline {
    --lcms-timeline-line: var(--color-brand-primary);
    position: relative;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}
.lcms-timeline-vertical {
    flex-direction: column;
}

.lcms-timeline > li {
    position: relative;
    display: grid;
    flex-shrink: 0;
    align-items: center;
    grid-template-rows: var(--timeline-row-start, minmax(0, 1fr)) auto var(--timeline-row-end, minmax(0, 1fr));
    grid-template-columns: var(--timeline-col-start, minmax(0, 1fr)) auto var(--timeline-col-end, minmax(0, 1fr));
}
.lcms-timeline-vertical > li {
    --timeline-row-start: minmax(0, 1fr);
    --timeline-row-end: minmax(0, 1fr);
    justify-items: center;
}
.lcms-timeline-vertical.lcms-timeline-snap-icon > li {
    --timeline-col-start: minmax(0, 1fr);
    --timeline-row-start: 0.5rem;
}

.lcms-timeline-start,
.lcms-timeline-end {
    margin: 0.25rem;
}
.lcms-timeline-vertical .lcms-timeline-start {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 4;
    align-self: center;
    justify-self: end;
}
.lcms-timeline-vertical .lcms-timeline-end {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 4;
    align-self: center;
    justify-self: start;
}
.lcms-timeline-middle {
    grid-column-start: 2;
    grid-row-start: 2;
}

.lcms-timeline > li > hr {
    width: 100%;
    border: 0;
    margin: 0;
    background-color: var(--lcms-timeline-line);
}
.lcms-timeline hr {
    height: 0.25rem;
}
.lcms-timeline-vertical > li > hr {
    height: 100%;
    width: 0.25rem;
}
.lcms-timeline-vertical > li > hr:first-child {
    grid-column-start: 2;
    grid-row-start: 1;
}
.lcms-timeline-vertical > li > hr:last-child {
    grid-column-start: 2;
    grid-column-end: auto;
    grid-row-start: 3;
    grid-row-end: none;
}
.lcms-timeline-vertical:has(.lcms-timeline-middle) > li > hr:first-child {
    border-bottom-right-radius: 1.9rem;
    border-bottom-left-radius: 1.9rem;
}
.lcms-timeline-vertical:has(.lcms-timeline-middle) > li > hr:last-child {
    border-top-left-radius: 1.9rem;
    border-top-right-radius: 1.9rem;
}

@media (max-width: 767px) {
    .lcms-timeline-compact-mobile.lcms-timeline-vertical > li {
        --timeline-col-start: 0;
    }
    .lcms-timeline-compact-mobile.lcms-timeline-vertical .lcms-timeline-start {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 4;
        align-self: center;
        justify-self: start;
    }
    .lcms-timeline-compact-mobile.lcms-timeline-vertical li:has(.lcms-timeline-start) .lcms-timeline-end {
        grid-column-start: auto;
        grid-row-start: none;
    }
}