.timeline {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    
    .container {
        position: relative;
        padding: 15px 0 0px 0;

        .timeline__item {
            position: relative;
            padding-left: 50px;
            display: grid;
            grid-template-columns: auto 2fr;
            gap: 15px;
            margin-bottom: var(--font-margin-p);

            .timeline__name,
            .timeline__headline {
                font-family: var(--font-family-display);
                text-transform: uppercase;
                display: flex;

            }
            .timeline__name {
                font-size: clamp(1.875rem, 0.8604rem + 4.329vw, 5rem);
                line-height: clamp(1.25rem, -0.1705rem + 6.0606vw, 5.625rem);
                grid-column: 1;
                grid-row: 1;
                padding-top: 3px;
                color: var(--main-color);
                position: relative;
                align-self: start;
                &::before {
                    content: '';
                    position: absolute;
                    top: 50%;
                    height: 3px;
                    left: -50px;
                    width: 25px;
                    background-color: var(--main-color);
                }
                &::after {
                    content: '';
                    position: absolute;
                    top: calc(50% - 3.5px);
                    height: 3px;
                    left: -25px;
                    width: 10px;
                    height: 10px;
                    border-radius: 100%;
                    background-color: var(--main-color);
                }
            }
            .timeline__headline {
                font-size: clamp(0.875rem, 0.3474rem + 2.2511vw, 2.5rem);
                line-height: clamp(1rem, 0.3101rem + 2.9437vw, 3.125rem);
                grid-column: 2;
                grid-row: 1;
                hyphens: auto;
                hyphenate-limit-chars: auto 3;
                hyphenate-limit-lines: 4;
            }
            .timeline__description {
                grid-column: 1 / span 2;
                grid-row: 2;
            }
        }

        .timeline__item:nth-last-of-type(2) {
            .timeline__description {
                > :last-child  {
                    margin-bottom: 0;
                }
            }
        }

        .timeline__helper {
            width: 3px;
            position: absolute;
            left: 0px;
            top: 0px;
            bottom: 10px;
            background-color: var(--main-color);
            &::before {
                content: '';
                background-color: var(--main-color);
                width: 19px;
                height: 19px;
                position: absolute;
                top: -19px;
                left: -8px;
                border-radius: 100%;
            }
            &::after {
                content: '';
                border-left: 3px dashed var(--main-color);
                height: 30px;
                position: absolute;
                left: 0px;
                bottom: -30px;
            }
        }
    }
}

@media (min-width: 768px) {
    .timeline {
        .container {
            padding-top: 70px;
            .timeline__item {
                width: 50%;
                display: block;
                .timeline__name,
                .timeline__headline,
                .timeline__description {
                    display: block;
                }
                .timeline__headline {
                    margin-bottom: var(--font-margin-p);
                }
                .timeline__name {
                    &::before {
                        height: 5px;
                    }
                    &::after {
                        width: 36px;
                        height: 36px;
                        top: calc(50% - 15px);
                    }
                }
            }
            .timeline__item:nth-child(odd) {
                text-align: right;
                margin-right: 50%;
                padding-left: 0px;

                .timeline__name,
                .timeline__headline,
                .timeline__description {
                    padding-right: 35%;
                }


                .timeline__name {
                    &::before {
                        width: 24%;
                        right: 0;
                        left: initial;
                    }
                    &::after {
                        left: initial;
                        right: 20%;
                    }
                }
            }
            .timeline__item:nth-child(even) {
                text-align: left;
                margin-left: 50%;
                padding-left: 0px;

                .timeline__name,
                .timeline__headline,
                .timeline__description {
                    padding-left: 35%;
                }

                .timeline__name {
                    &::before {
                        width: 24%;
                        left: 0px;
                    }
                    &::after {
                        left: 20%;
                        right: initial;
                    }
                }
            }
            .timeline__helper {
                left: 50%;
                width: 5px;

                &::before {
                    content: '';
                    background-color: var(--main-color);
                    width: 50px;
                    height: 50px;
                    position: absolute;
                    top: -50px;
                    left: -22.5px;
                    border-radius: 100%;
                }
                &::after {
                    content: '';
                    border-left: 5px dashed var(--main-color);
                    height: 60px;
                    position: absolute;
                    left: 0px;
                    bottom: -60px;
                }
            }
        }
    }
}