.container-fluid.blue-bg
    .container
        h2.pb-3.pt-2 Vertical Left-Right Timeline

        //first section
        .row.align-items-center.how-it-works
            .col-2.text-center.bottom
                .circle 1
            .col-6
                h5 Fully Responsive
                p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.


        //path between 1-2
        .row.timeline
            .col-2
                .corner.top-right
            .col-8
                hr
            .col-2
                .corner.left-bottom

        //second section
        .row.align-items-center.justify-content-end.how-it-works
            .col-6.text-right
                h5 Using Bootstrap
                p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.
            .col-2.text-center.full
                .circle 2

        //path between 2-3
        .row.timeline
            .col-2
                .corner.right-bottom
            .col-8
                hr
            .col-2
                .corner.top-left

        //third section
        .row.align-items-center.how-it-works
            .col-2.text-center.top
                .circle 3
            .col-6
                h5 Now with Pug and Sass
                p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.