/* Name and define areas */

.lg-nav {

    grid-area: header;

    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -o-transition: all 2s ease;
    -ms-transition: all 2s ease;
    transition: all 2s ease;
}

.lg-main {

    grid-area: map;

    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -o-transition: all 2s ease;
    -ms-transition: all 2s ease;
    transition: all 2s ease;
}

.lg-side {

    grid-area: sidebar;
    grid-column: 1 / 3;
}

.lg-side-second {

    grid-area: sidebar-second;
    grid-column: 1 / 3;
    grid-row: 3 / 5;
}

.lg-side-second.lg-side-second-to-top {

    grid-area: sidebar-second;
    grid-column: 1 / 3;
    grid-row: 1 / 5;
}

/* Define grid */

.wrapper {

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 60px 1fr 1fr 60px;
    grid-template-areas: "header header""map map""map map""sidebar sidebar-second";
    height: 100vh;

    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -o-transition: all 2s ease;
    -ms-transition: all 2s ease;
    transition: all 2s ease;
}

.wrapper-mobile {

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 60px 1fr 1fr 120px;
    grid-template-areas: "header header""map map""map map""sidebar sidebar-second";
    height: 100vh;

    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -o-transition: all 2s ease;
    -ms-transition: all 2s ease;
    transition: all 2s ease;
}