/* The actual timeline (the vertical ruler) */
.aft-timeline {
    position:           relative;
}

/* The actual timeline (the vertical ruler) */
.aft-timeline::after {
    content:            '';
    position:           absolute;
    width:              6px;
    background-color:   var(--wp--preset--color--primary);
    bottom:             110px;
    left:               2.5rem;
    margin-left:       -3px;
    top:                1rem;
}

/* Container around content */
.aft-timeline .c {
    padding:            0 0 0 6rem;
    position:           relative;
    background-color:   inherit;
    width:              100%;
}

/* The circles on the timeline */
.aft-timeline .c::after {
    --w:                5rem;
    content:            attr(data-year);
    position:           absolute;
    width:              var(--w);
    height:             var(--w);
    right:             -2.5rem;
    background-color:   var(--wp--preset--color--primary);
    top:                15px;
    border-radius:      50%;
    z-index:            1;
    display:            flex;
    align-items:        center;
    color:              white;
    font-size:          1.325rem;
    justify-content:    center;
    left:               0;
    font-weight:        bold;
    top:                0;
}

/* Place the container to the right */
.aft-timeline .c:nth-child(even) {
    left:               0;
    padding-left:       6rem;
    padding-right:      0;
}

/* Add arrows to the left container (pointing right) */
.aft-timeline .c::before {
    content:            '';
    height:             3px;
    position:           absolute;
    top:                2.5rem;
    width:              100%;
    z-index:            1;
    background:         var(--wp--preset--color--primary);
    left:               0;
}

/* The actual content */
.aft-timeline .time {
    padding:            1.6rem 2rem;
    background-color:   var(--wp--preset--color--primary);
    position:           relative;
    margin:             0;
    border:             none;
    margin-top:         1rem;
    z-index:            2;
    color:              white;
    border-radius:      6px;
    display:            flex;
    flex-direction:     column;
    gap:                0.625rem;
}
    .aft-timeline .c:nth-child(3n+1)::before,
    .aft-timeline .c:nth-child(3n+1)::after,
    .aft-timeline .c:nth-child(3n+1) .time {
        background:     var(--wp--preset--color--primary-dark);
    }
    .aft-timeline .time a {
        color:          white;
    }

.aft-timeline h3,
.aft-timeline h3.open:hover {
    font-size:          1.325rem;
    line-height:        1.325;
    cursor:             pointer;
    align-self:         flex-start;
    border-bottom:      1px dotted white;
}
    .aft-timeline h3:hover,
    .aft-timeline h3.open {
        border-bottom:  1px solid white;
    }
.aft-timeline p {
    display:            none;
    color:              white;
    line-height:        1.325;
}
    .aft-timeline h3.open + p {
        display:        block;
    }

@media screen and (min-width: 600px) {
/* Center the timelime */
    .aft-timeline::after {
        left:           50%;
    }

/* Full-width containers */
    .aft-timeline .c {
        width:          50%;
        padding:        0 5rem 0 0;
    }

/* Offset the container up */
    /*.aft-timeline .c + .c {
        margin-top:    -2.5rem;
    }*/

/* Make sure all circles are at the same spot */
    .aft-timeline .c::after {
        left:           auto;
    }
    .aft-timeline .c:nth-child(even)::after {
        left:          -2.5rem;
    }

/* Make all right containers behave like the left ones */
    .aft-timeline .c:nth-child(even) {
        left:           50%;
        padding-left:   5rem;
    }

    .aft-timeline .c:nth-child(odd) h3 {
        align-self:     flex-end;
    }
    .aft-timeline .c:nth-child(odd) .time {
        text-align:     right;
    }
}