.explorer {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas: 
        "menu header  aside"
        "menu nav     aside"
        "menu main    aside"
        "menu footer  aside"
}

.explorer>* {
}

.explorer>menu {
    grid-area: menu;
    padding: 0;
    margin: 0;
}

.explorer>main {
    grid-area: main;
}

.explorer>aside {
    grid-area: aside;
}

@media (max-width: 415px) {

    .explorer {
        display: block;
        position: relative;
    }

    .explorer>* {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100vw;
        height: 100vh;
        animation-duration: 0.5s;
        transition-timing-function: ease-in;
        animation-fill-mode: both;
    }

    .explorer>menu {
        z-index: 1;
        background-color: var(--page-menu-bgcolor);
    }

    .explorer>main {
        z-index: 2;
        background-color: var(--paper-color);;
        animation-name: fadeOutRight;
    }

    .explorer>main.selected {
        animation-name: fadeInRight;
    }

    .explorer>aside {
        z-index: 3;
        background-color: var(--background-color);
        animation-name: fadeOutRight;
    }

    .explorer>aside.selected {
        animation-name: fadeInRight;
    }
}

@keyframes fadeInRight {
    0% {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }
  
    100% {
      opacity: 1;
      transform: none;
    }
}

@keyframes fadeOutRight {
    100% {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }
  
    0% {
      opacity: 1;
      transform: none;
    }
}