.c-hdr {
    position: relative;
}

.c-hdeco {
    overflow: hidden;
    height  : var(--c-hdeco-height);
}

.c-hdr-home {
    --c-hdeco-height: 15vh;
}

.c-hdr-portail {
    --c-hdeco-height: 12vh;
}

.c-hdr-page {
    --c-hdeco-height: 10vh;
}

.c-hdr-logo {
    position: absolute;
    z-index : 1;
    left    : var(--margin-md);
    bottom  : 0;
    height  : calc(var(--c-hdeco-height) / 3);
    width   : auto;
}

.c-hdr-logo>img {
    height       : 100%;
    width        : auto;
    border       : var(--border-thin) solid var(--gray-light);
    border-bottom: none;
}

@media (min-width: 48rem) {
    .c-hdr {
        position          : unset;
        max-width         : var(--max-width);
        margin            : 0 auto;
        display           : grid;
        grid              : "logo content""deco deco";
        grid-template-rows: var(--main-menu-height) var(--c-hdeco-height);
    }

    .c-hcontent {
        grid-area: content;
    }

    .c-hdeco {
        position  : absolute;
        grid-area : deco;
        width     : 100vw;
        left      : 0;
        margin-top: var(--main-menu-height);
    }

    .c-hdr-home {
        --c-hdeco-height: 15rem;
    }

    .c-hdr-portail {
        --c-hdeco-height: 12rem;
    }

    .c-hdr-page {
        --c-hdeco-height: 10rem;
    }

    .c-hdr-logo {
        position : unset;
        grid-area: logo;
        height   : auto;
    }

    .c-hdr-logo>img {
        height      : var(--main-menu-height);
        border-top  : none;
        border-left : var(--border-thick) solid var(--gray-strong);
        border-right: var(--border-thick) solid var(--gray-strong);
    }
}