@import url(cons--work.css);
@import url(anim--work.css);
@import url("/grp/grp-section--header.css");
@import url("/grp/grp-scroller.css");
@import url("/grp/grp-features.css");
@import url("/grp/grp-features--item.css");
@import url("/grp/grp-legacy.css");
@import url("/grp/grp-media.css");
html {
    scroll-timeline-name: --mainScrollTimeline;
}
body.page--work {
    padding: var(--mainheader-height) 0 0 var(--mainheader-height);
    #mainheader {
        position: fixed;
        top: 0;
        left: 0;
    }
    .page--wrapper {
        > header {
            border-bottom: var(--border);
        }
    }
    .sections--wrapper {
        width: 100%;
        #abstract {
            p {
                width: 75%;
                font-size: var(--work-highlight--font-size);
                font-weight: var(--work-highlight--font-weight);
                line-height: 1.2;
                text-wrap: balance;
            }
        }
        #clients {
            margin: 0;
        }
        #about {
            display: grid;
            grid-template-columns: 25% 10% 1fr;
            grid-template-areas: "objective spacer result";
            gap: var(--spacer);
            margin-top: var(--section-header--spacer) !important;
            > .goal {
                grid-area: objective;
                p {
                    font-size: var(--work-default--font-size);
                    font-weight: var(--work-default--font-weight);
                    line-height: 1.2;
                    text-wrap: balance;
                }
            }
            > .description {
                grid-area: result;
                p {
                    font-size: var(--work-description--font-size);
                    font-weight: var(--work-description--font-weight);
                    line-height: 1.2;
                    text-wrap: balance;
                }
            }
        }
        section {            
            padding: 0 var(--section-offset) var(--section-header--spacer);
            border-bottom: var(--border);
            &:last-of-type {
                margin: 0 !important;
                border-bottom: none;
            }
            &:has(.grp-scroller) {
                overflow: hidden;
                padding: 0;
                margin: 0;
            }
        }
    }
    section:has(.grp-legacy) {
        &:nth-of-type(even) {
            .grp-legacy {
                .wrapper {
                    grid-template-columns: var(--legacy-media--size) 1fr;
                    grid-template-areas: "media content";
                    .content--wrapper {
                        border-right: none;
                        border-left: var(--border);
                        
                    }
                }
            }
        }
        .grp-legacy {            
            &:has(+ .grp-scroller) {
                .wrapper {
                    margin: 0 !important;
                }
            }
            & + .grp-scroller {
                margin: 0 0 var(--section-header--spacer);
                border-bottom: var(--border);
            }
        }
    }    
    #intro {
        padding: 0 var(--section-offset) calc(var(--section-header--spacer));
        margin: 0 0 var(--section-spacer);
        border-bottom: none;
        border-bottom: var(--border);
        p {
            width: 80%;
            font-size: var(--work-default--font-size);
            font-weight: var(--work-default--font-weight);
            line-height: 1.2;
            text-wrap: balance;
        }
    }
    @media(max-width: 992px) {
        padding: var(--mainheader-height) 0 0;
        .sections--wrapper {
            #about {
                grid-template-columns: 30% 5% 1fr;

            }
        }
    }
    @media(max-width: 600px) {
        padding: var(--mainheader-height) 0 0;
        .sections--wrapper {
            #about {
                grid-template-columns: 100%;
                grid-template-areas: "objective" "result";
            }
        }
    }
}