@media (max-width:600px){
    /* reset grid */
    .grid{
        gap:initial;    
    }
    .grid2,
    .grid3,
    .grid4{
        grid-template-columns: 1fr;
    }

    /* header */
    .btn-menu-toggle{
        display: block;
        background-color: transparent;
        border: 1px solid var(--color-light);
        color: var(--color-light);
    }
    .btn-menu-toggle i{
        font-size: 1.2em;
    }
    /* menu */
    .menu{
        width:100%;
        position: absolute;
        left: 0;
        top: 64px;
        background-color: var(--color-dark);
        box-shadow: 1px 3px 5px #928dff;
        height: 0;
        overflow: hidden;
    }
    .review-main{
        
    background-position: center;
    }
    nav{
        width: 100;
    }
    .menu li{
        width: 100%;
        text-align: left;
        padding: 10px 20px !important;
    }
    .menu.show{
        height: 270px;
    }
    /* how to */
    #howto .grid{
        grid-template-areas: 'detail1 detail2'
        'img img';
        grid-template-columns: auto;
    }
    .function ul{
        padding: 10px;
    }
    .function ul li{
        text-align: center;
    }
    /* features */
    #features .grid{
        gap: 10px;
    }
    #features .grid3{
        grid-template-columns: repeat(2,1fr);
    }
    #feature{
        padding: 15px;
    }
    .feature h3{
        font-size: 1em;
    }
/* contact section */
.section-contact{
    padding: 60px 20px;
}
.bg-contact{
    position: initial;
    width: 100%;
    height: 300px;
}
#header{
    /* width: 25%; */
}
}