.pfm-layout {
    display: grid;
    min-height: 100vh;
    grid-template-rows:
        auto
        auto
        1fr
        auto;
    grid-template-columns: 1fr;

    grid-template-areas:
        'h'
        'sh'
        'm'
        'f';
}

.pfm-layout__header {
    grid-area: h;
}
.pfm-layout__subheader {
    grid-area: sh;
}
.pfm-layout__content {
    grid-area: m;
}
.pfm-layout__footer {
    grid-area: f;
}

.pfm-layout__filter,
.pfm-layout__content,
.pfm-layout__toc {
    overflow-y: auto;
}

.pfm-layout__content {
    justify-self: center;
    width: 100%;
    display: flex;
}

.pfm-layout_default .pfm-layout__content {
    max-width: 1200px;
}

.pfm-layout__content .pfm-layout__content-body {
    width: 100%;
}

/* test styles */

:host.test .pfm-layout > *:nth-of-type(1) {
    background: #d29d7a;
}
:host.test .pfm-layout > *:nth-of-type(2) {
    background: #e1b08c;
}
:host.test .pfm-layout > *:nth-of-type(3) {
    background: #efc0a0;
}
:host.test .pfm-layout > *:nth-of-type(4) {
    background: #f3dbd2;
}
:host.test .pfm-layout > *:nth-of-type(5) {
    background: #f2cfb4;
}
:host.test .pfm-layout > *:nth-of-type(6) {
    background: #d29d7a;
}

/* testing layout */
/*
    layout to make each of the elements scrollable
    layout only works without footer and header
    needs to be redone to let all elements work
    consider nested another grid inside
*/

:host.pfm-layout__design .pfm-layout__content > .pfm-layout__left {
    min-width: 250px;
}