/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-width: 480px) {


    .panel-system {
        grid-template-columns: 0 20% auto 20% 0;
    }

    .main-panel-system {
        display: grid;
        grid-template-columns: 20% 1fr 1fr 20%;
        grid-template-rows: auto auto;
        align-items: end;
    }

    .main-panel-system > div {
        align-self: stretch;
    }



    .lo-main-panel-c, .lo-main-panel-rc, .lo-main-panel-lc {
        grid-column-start: 1;
        grid-column-end: 5;
        grid-row-start: 1;
    }

    .lo-left-panel, .lo-main-panel-l {

        grid-column-start: 1;
        grid-column-end: 5;
        grid-row-start: 2;
    }

    .lo-right-panel, .lo-main-panel-r {
        grid-column-start: 1;
        grid-column-end: 5;
        grid-row-start: 3;
    }
}

@media only screen and (min-width: 481px) and (max-width: 767px) {

    .panel-system {
        grid-template-columns: 0 20% auto 20% 0;
    }

    .main-panel-system {
        display: grid;
        grid-template-columns: 20% 1fr 1fr 20%;
        grid-template-rows: auto auto;
        align-items: end;
    }

    .main-panel-system > div {
        align-self: stretch;
    }


    .lo-main-panel-c, .lo-main-panel-rc, .lo-main-panel-lc {
        grid-column-start: 1;
        grid-column-end: 5;
        grid-row-start: 1;
    }

    .lo-left-panel, .lo-main-panel-l {

        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 2;
    }

    .lo-right-panel, .lo-main-panel-r {
        grid-column-start: 3;
        grid-column-end: 5;
        grid-row-start: 2;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1060px) {


    .panel-system {
        grid-template-columns: 10px 20% auto 20% 10px;
    }

    .main-panel-system {
        display: grid;
        grid-template-columns: 20% auto 20%;
        grid-template-rows: 1fr;
        align-items: end;
    }

    .main-panel-system > div {
        align-self: stretch;
    }


    .lo-main-panel-c {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
    }


    .lo-main-panel-rc {
        grid-column-start: 2;
        grid-column-end: 4;
        grid-row-start: 1;
    }

    .lo-main-panel-lc {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 1;
    }

    .lo-left-panel, .lo-main-panel-l {

        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
    }

    .lo-right-panel, .lo-main-panel-r {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
    }
}

@media only screen and (min-width: 1061px) {


    .panel-system {
        grid-template-columns: 50px 20% auto 20% 50px;
    }

    .main-panel-system {
        display: grid;
        grid-template-columns: 20% auto 20%;
        grid-template-rows: 1fr;
        align-items: end;
    }

    .main-panel-system > div {
        align-self: stretch;
    }


    .lo-main-panel-c {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
    }


    .lo-main-panel-rc {
        grid-column-start: 2;
        grid-column-end: 4;
        grid-row-start: 1;
    }

    .lo-main-panel-lc {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 1;
    }

    .lo-left-panel, .lo-main-panel-l {

        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
    }

    .lo-right-panel, .lo-main-panel-r {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
    }
}

.panel-system {
    display: grid;
    /*grid-template-columns: 50px 20% auto 20% 50px;*/
    grid-template-rows: auto auto auto;
    grid-gap: 1rem;
    grid-row-gap: 0;
}

.lo-header-panel {
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 1;
}


.lo-footer-panel {
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 3;
}

.lo-main-panel {
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 2;
}


/*.lo-main-panel-r {*/
/*    grid-column-start: 4;*/
/*    grid-column-end: 5;*/
/*    grid-row-start: 2;*/
/*}*/

/*.lo-main-panel-l {*/
/*    grid-column-start: 2;*/
/*    grid-column-end: 3;*/
/*    grid-row-start: 2;*/
/*}*/