#milestone {
    & {
        margin-top: 97px;
    }

    .milestone-heading {
        font-size: 29px;
        font-weight: 800;
        color: var(--g-color-ligh-blue);
        text-align: center;
    }

    .timeline {
        & {
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-top: clamp(32px, calc(100 / 1920 * 100vw), 100px);
            padding: clamp(0px, calc(50 / 1920 * 100vw), 50px) clamp(0px, calc(120 / 1920 * 100vw), 120px) clamp(0px, calc(40 / 1920 * 100vw), 40px) clamp(0px, calc(120 / 1920 * 100vw), 120px);
            position: relative;
            margin-bottom: 50px;
        }

        @media (min-width: 992px) {
            &:before {
                content: "";
                position: absolute;
                top: 8px;
                height: 100%;
                background-image: url('/_data/styly/zakoturcin/img/web/o-firme-ruller.png');
                width: 50px;
                background-repeat: no-repeat;
                left: calc(50% - 22px);
            }
        }

        .item {
            display: flex;
            width: 100%;
        }

        .col-year {
            flex: 1 1 40%;
            max-height: 40%;
            margin-top: 7px;
            display: flex;
            margin-left: -20px;
        }

        .col-year span {
            position: relative;
        }

        .col-year span:before,
        .col-year span:after {
            content: "";
            position: absolute;
            top: 8px;
            height: 28px;
            width: 300px;
            background-repeat: no-repeat;
        }

        .col-year span:before {
            background-image: url('/_data/styly/svg/drill.svg');
        }

        .col-year span:after {
            background-image: url('/_data/styly/svg/drill-darker-light-blue.svg');
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }

        .col-content {
            flex: 1 1 40%;
            max-height: 40%;
            line-height: 1.7;
            margin-bottom: 24px;
        }

        .col-year {
            justify-content: flex-start;
        }

        @media (max-width: 991px) {
            .item {
                display: flex;
                flex-direction: column;
                gap: 17px;
                max-width: 600px;
            }

            .col-year span:before,
            .col-year span:after {
                left: calc(100% + 2px);
                transform: scaleX(-1);
            }
        }
        @media (min-width: 576px) {
            .item:nth-child(even) {
                margin-left: auto;
            }

            .col-year {
                margin-left: 0;
            }
        }

        @media (min-width: 992px) {

            .col-content {
                max-width: unset;
            }

            .item:nth-child(even) {

                .col-year {
                    order: 2;
                    padding-left: 70px;
                    justify-content: flex-start;

                }

                .col-year span:before,
                .col-year span:after {
                    left: calc(100% + 30px);
                }

                .col-content {
                    order: 1;
                    text-align: right;
                    padding-right: 70px;
                }
            }

            .item:nth-child(odd) {
                .col-year {
                    order: 1;
                    justify-content: flex-end;
                }

                .col-year span:before,
                .col-year span:after {
                    right: calc(100% + 30px);
                    transform: scaleX(-1);
                }

                .col-content {
                    order: 2;
                    padding-left: 70px;
                }
            }
        }


        .year {
            font-size: 29px;
            color: var(--g-color-ligh-blue);
            font-weight: 800;
            padding-right: 70px;
            transition: color 0.3s ease-in-out;
        }

        .col-content .title {
            font-size: 19px;
            font-weight: bold;
        }

        .col-content .description {
            font-size: clamp(15px, calc(19 / 1920 * 100vw), 19px);
        }

        .item:hover {
            .year {
                color: var(--g-color-2);
            }

            .title {
                color: var(--g-color-2);
            }

            .col-year span:after {
                opacity: 1;
            }
        }
    }
}