.cp-timeline {
    display: flex;
    flex-direction: column;

    .cp-timeline-event {
        flex-basis: 100%;
        padding-left: var(--o3-spacing-s);
        margin-left: 0;
        margin-top: 0;
        margin-bottom: 0;
        position: relative;

        &::before {
            content: "";
            width: 2px;
            background: var(--o3-color-palette-black);
            height: 100%;
            display: block;
            position: absolute;
            left: var(--o3-spacing-5xs);
            top: 0;
        }

        .cp-timeline-event__heading {
            position: relative;
            margin-top: var(--o3-spacing-s);
            margin-bottom: var(--o3-spacing-5xs);

            .cp-timeline-event__heading-title {
                font-weight: var(--o3-font-weight-semibold);
                &::before {
                    content: "";
                    position: absolute;
                    top: 6px;
                    left: -23px;
                    height: var(--o3-spacing-4xs);
                    width: var(--o3-spacing-4xs);
                    border-radius: 50%;
                    background-color: var(--o3-color-palette-black);
                }
            }
        }

        p {
            margin-bottom: var(--o3-spacing-4xs);
            margin-top: var(--o3-spacing-5xs);
            font-family: var(--o3-type-body-base-font-family);
            font-size: var(--o3-type-body-base-font-size);
            font-weight: var(--o3-type-body-base-font-weight);
            line-height: var(--o3-type-body-base-line-height);
        }
    }
}