@import url(cons--timeline.css);
@import url(anim--timeline.css);
@import url("/grp/grp-timeline.css");
@import url("/grp/grp-timeline--item.css");

body.page--timeline {
    background: var(--clr-gray-200);
    padding: var(--mainheader-height) 0 0 var(--mainheader-height);
    #mainheader {
        position: fixed;
        top: 0;
        left: 0;
    }
    .page--wrapper {        
        > header:has(h1) {
            width: calc(100% - 2 * var(--offset));
            margin: 0 var(--offset);
            h1 {
                max-width: var(--timeline-now--size);
                margin: var(--offset) 0 0;
                font-size: var(--timeline-title--font-size);
                font-weight: 300;
                padding: var(--spacer) var(--timeline-item--offset);
                border-bottom: var(--border);
                background: var(--clr-white);  
            }
        }
        .sections--wrapper {
            padding: 0 var(--offset);
        }
    }
    @media (max-width: 1280px) {
        .page--wrapper {        
            > header:has(h1) {
                h1 {
                    max-width: 100%;
                }
            }
        }
    }
    @media(max-width: 992px) {
        padding: var(--mainheader-height) 0 0;
    }
}