@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: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 2rem;
}
article section > div h3 span{
    display: block;
    font-size: 1rem;
}
@media (max-width: 768px) {
    article section div{
        grid-template-columns: 1fr;
        gap: 0;
    }
}