*,

        *::before,

        *::after {

            box-sizing: border-box;

        }





        .timeline {

            display: grid;

            width: 100%;

            max-width: 1080px;

            height: 100%;

            margin: auto;

            padding: 0 2rem 4rem;

            grid-template-columns: 1fr;

            grid-template-rows: auto;

        }

        .tree {

            position: relative;



            display: grid;

            overflow: hidden;



            width: 100%;

            height: 100%;



            margin: auto;



            grid-template-columns: 1fr 1fr;

        }



        .tree::before {

            position: absolute;

            z-index: 1;

            top: 0;

            left: 50%;



            width: 2px;

            height: 100%;



            content: '';



            background: #E6EDF4;

        }



        .timeline-right {

            position: relative;



            display: grid;



            width: 100%;



            grid-column: 2/2;

            justify-items: start;

            place-items: center;

        }



        .timeline-left {

            position: relative;



            display: grid;



            width: 100%;



            grid-column: 1/1;

            justify-items: end;

            place-items: center;

        }



        .timeline-right-0,

        .timeline-left-0 {

            min-height: 2rem;

        }



        .marker-r {

            position: absolute;

            z-index: 2;

            right: 100%;

            width: 18px;

            height: 18px;

            margin-right: -10px;

            border-radius: 50%;

            border: 4px solid #E6EDF4;

            background: #6B95BF;

        }



        .marker-l {

            position: absolute;

            z-index: 3;

            left: 100%;

            width: 18px;

            height: 18px;

            margin-left: -8px;

            border-radius: 50%;

            border: 4px solid #E6EDF4;

            background: #6B95BF;

        }



        .timeline-content {

            width: 80%;

            margin-bottom: 24px;

        }



        .timeline-card{

            padding: 24px;

            border-radius: 12px;

            background-color: #E6EDF4;

            

        }

        .timeline-content h3 {

            margin: .5rem 0;

            color: #002C58;

            font-weight: 700;

            font-size: 24px;

        }



        .timeline-content p {

            font-size: 14px;

            color: #000;

        }



        .tree div:nth-child(odd)>.timeline-content {

            margin-top: 0;



            text-align: left;

        }



        .tree div:nth-child(even)>.timeline-content {

            margin-top: -16rem;



            text-align: right;

        }



        /*  responsive  */

        @media only screen and (max-width: 40em)

        /* max-width 640px */

        

            {



            .timeline img {

                display: grid;



                margin: 1rem;

                padding: 0;

            }



            .tree {

                grid-template-columns: 1fr;

            }



            .timeline-card{

                margin-left: 46px;

            }

            .tree::before {

                left: 1rem;

            }





            .timeline-right {

                grid-column: 1/1;

                justify-items: start;

            }



            .timeline-left {

                grid-column: 1/1;

                justify-items: start;

            }



            .timeline-right-0,

            .timeline-left-0 {

                display: none;

            }



            .marker-r {

                left: .5rem;



                margin-right: -10px;

            }



            .marker-l {

                left: 1rem;

            }



            .tree div:nth-child(even)>.timeline-content {

                width: 80%;

                margin-top: 0;

                padding: 0 2rem;



                text-align: left;

            }



            .diploma {

                padding: 4rem 2rem;



                gap: .25rem;

                grid-template-columns: repeat(2, 1fr);

            }



            .diploma img {

                width: 200px;

                margin: 0;

            }



        }