responsive.css

@media screen and (max-width: 600px) {
    :root {
        --section-links-size: 26px;
    }
    /*main menu*/

    /*home layout*/
    .layout-home {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr; 
    }
    .layout-home > .banner-home {
        grid-column: 1/3;
        grid-row: 1/3;
        background: #0190c49c url(assets/img1.jpg);
    }
    .layout-home > .text {
        grid-column: 1/3;
        grid-row: 1/3;
        padding: 8px;
        z-index: 2;
    }
    .layout-home > .text  > h1 {  
        font-size: 30px;
        color: #fff;
    }
    .layout-home > .text  > h2 {
        font-size: 18px;
        letter-spacing: 1px;
        color: #eee;
    }
    /*layout what*/
    .layout-what {
        grid-gap: 1em;
        grid-template-columns: 8px 1fr 8px;
        grid-template-areas:
            ". wplogo ."
            ". wpa ."
            ". wpb ."; 
    }
    .from-google p {
        font-size: 16px;
        line-height: 26px;
    }
    .from-us {
        opacity: 0;
    }
    /*layout how*/
    .layout-how{
        display: flex;
        flex-direction: column;
        padding: 0px;
        justify-content: space-between;
        color: #0190c49c;
       
    }
    .layout-how h1 {
        text-align: right;
        padding: 18px;
    }
    .layout-how > .gallary {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 87vh;
        flex-direction: column;
        margin: 0;
        
    } 
    .o1 {
        background: linear-gradient(to bottom, #1db8ec9c  , rgba(4, 123, 163, 0.659)) ;
        color: #eee;
    }
    .o2{
        background: linear-gradient(to bottom,rgba(4, 123, 163, 0.659), #6f86d699) ;
        color: #eee;
    }
    .o3 {
        background: linear-gradient(to bottom, #6f86d699  , rgba(41, 28, 223, 0.659)) ;
        color: #eee;
    }
    .o4{
        background: linear-gradient(to bottom,rgba(41, 28, 223, 0.659), #6f86d699) ;
        color: #eee;
    }

}