$margin: 2.5rem
$header-size: 1.2rem
$dashed-border-size: 0.1rem
$time-border-size: 0.5rem
.timeline
    position: relative

    div
        *
            //reset
            margin: 0 !important
            padding: 0 !important

    h2
        font-size: $header-size
        text-align: right

    ul
        position: relative

        &::before
            content: ' '
            height: 100%
            width: $time-border-size
            position: absolute
            background-color: rgba(255, 255, 255, 0.1)
            left: $header-size*2.5+$margin/2-$time-border-size/2

        li
            display: inline-grid
            grid-template-columns: $header-size*2.5 auto
            column-gap: $margin
            width: 100%

            ul
                margin-bottom: $margin*1.6 !important

                li
                    display: block

                li:nth-child(1)
                    font-weight: bold
                    font-size: $header-size
                    margin-bottom: $margin/2 !important

                    &::before
                        content: ' '
                        background-color: rgba(255, 255, 255, 0.2)
                        height: $header-size*1.4
                        width: $time-border-size
                        left: -$margin/2-$time-border-size/2
                        position: absolute

                li:nth-child(2)
                    line-height: 1.7rem

                &::after
                    content: ' '
                    height: $margin*0.8
                    width: 100%
                    position: absolute
                    border-bottom: $dashed-border-size dashed rgba(255, 255, 255, 0.2)
                    transform: translateY(-$dashed-border-size/2)

                &::before
                    content: none