@media (max-width: 768px) {
    body{
        grid-template-columns: calc(100vw - 40px) 40px ;
        align-items: flex-start;
    }
    body > header{
        grid-column: 1 / -1;
        grid-row: 1;
    }
    ul.banner{
        grid-column: 2;
        grid-row: 1 / 4;
    }
    body > main{
        grid-column: 1;
        grid-row: 2;
    }
    body > footer{
        grid-column: 1 / -1;
        grid-row: 3;
    }
    body > #slider,
    body > p{
        display: none;
    }
}


article section{
    padding: 4rem 0;
}
article section div{
    width: 80%;
    margin: 0 auto;
    padding: 2rem 0 ;
}
article section div ul{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 2rem;
}