/*Dispositivos moveis*/
@media screen and (max-width: 730px) {
    body {
        background-color: white;
    }
    div.container {
        display: grid;
        gap: 10px;
        grid-template: auto auto auto auto / auto;
    }
    div.person {
        grid-row: 1 / 2;
        grid-column: 1;
    }
    div.principal {
        grid-area: 2 / 1 / 3 /1;
    }
    aside {
        display: block;
        background-color: bisque;
    }
    asiide > div.contato {
        display: block;
        grid-area: 3 / 1 / 4 /1;
    }
    div.rodape {
        grid-area: 4 / 1 / 5 / 1;
        padding-bottom: 40px;
    }
    div.person > .contato {
        display: none;
    }
    div.escala {
        display: flex;
        flex-flow: column;
        justify-content: center;
    }
    
}
@media screen and (min-width: 730px) and (max-width: 992px) {
    body {
        background-color: white;
    }
    div.container {
        display: grid;
        gap: 10px;
        grid-template: auto auto auto auto / auto;
    }
    div.person {
        grid-row: 1 / 2;
        grid-column: 1;
    }
    
    div.principal {
        grid-area: 2 / 1 / 3 /1;
    }
    aside {
        display: block;
        background-color: bisque;
    }
    asiide > div.contato {
        display: block;
        grid-area: 3 / 1 / 4 /1;
    }
    div.rodape {
        grid-area: 4 / 1 / 5 / 1;
    }
    div.person > .contato {
        display: none;
    }
    div.escala {
        display: flex;
        flex-flow: column;
        justify-content: center;
    }
    p.itens {
        align-self: center;
        margin: 5px;
    }
}


@media screen and (min-width: 992px) {
    body {
        background-color: white;
    }
    div.container {
        display: grid;
        gap: 10px;
        grid-template: auto / 30% 70%;
        overflow-x: hidden;
    }
    div.person {
        grid-area: 1 / 1 / 2 / 2;
        position: fixed;
        left: 0;
        width: 30%;
    }
    
    .linear {
        grid-area: 1 / 2 / 2 /3;
    }
    div.principal {
        grid-area: 1 / 2 / 2 /3;
        overflow-y: auto;
    }
    aside {
        display: none;
        background-color: bisque;
    }
    div.contato {
        display: block;
        grid-area: 1 / 1 / 2 / 2;
    }
    
    div.person > .contato {
        display: block;
    }
    div.escala {
        display: flex;
        flex-flow: column;
        justify-content: center;
    }
    p.itens {
        align-self: center;
        margin: 5px;
    }
}