@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 h2{
    font-size: 2rem;
    padding-left: 6rem;
    position: relative;
    margin-bottom: 3rem;
}
article section h2::before{
    content: "";
    width: 26.75rem;
    height: 2px;
    background: var(--main-color);
    position: absolute;
    left: 0;
    bottom: -.5rem;
}
article section h2::after{
    content: "Voice";
    color: var(--main-color);
    font-size: .8rem;
    position: absolute;
    left: 27.5rem;
    bottom: -1rem;
}
@media (max-width: 768px) {
    article section{
        padding: 2rem 0;
    }
    article section h2{
        font-size: 1.5rem;
        padding-left: 2rem;
    }
    article section h2::before{
        width: 16rem;
    }
    article section h2::after{
        left: 17rem;
    }
}
.voice h2::after{
    content: "Voice";
}


article section ul{
    width: 80%;
    margin: 0 auto;
    padding: 2rem 0 ;
}
article section ul li{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    margin-bottom: 2rem;
}
article section ul li div{
    padding: 2rem;
    background: rgba(var(--main-color-opacity), .1);
    font-size: .9rem;
}
article section ul li img {
    height: auto;
    width: 100%;
}
@media (max-width: 768px) {
    article section ul li{
        grid-template-columns: 1fr;
        gap: 0;
    }
}