@media only screen and (max-width: 2560px) {
    .grid.wide{
        max-width: 2000px;
        margin:  0 auto;
    }
    .divnhomsp {
        width: 400px;
        margin-top: 35px;
    }
    
}


.grid{
    /*max-width: 1343px -> max-width: 2560px*/
    max-width: 2560px;
    width: 100%;
    display: block;  /* when add class in tag inline it will is block */
    margin: 0 auto;
}

@media only screen and (max-width: 1950px) {
    .grid.wide{
        max-width: 1600px;
        margin:  0 auto;
    }
    .divnhomsp {
        width: 400px;
        margin-top: 35px;
    }
    
}

.row{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -4px; /* this is for mobile padding */
}
.col{
    padding: 0 4px;
}
.c-0{display: none;}
.c-0 {
    display: none;
}
  
.c-1 {
    /* follow verhice or he... */
    flex: 0 0 8.33333%; 
    max-width: 8.33333%;
}
  
.c-2 {
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
}
  
.c-3 {
    flex: 0 0 25%;
    max-width: 25%;
}
  
.c-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
}
  
.c-5 {
    flex: 0 0 41.66667%;
    max-width: 41.66667%;
}
  
.c-6 {
    flex: 0 0 50%;
    max-width: 50%;
}
  
.c-7 {
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
}
  
.c-8 {
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
}
  
.c-9 {
    flex: 0 0 75%;
    max-width: 75%;
}
  
.c-10 {
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
}
  
.c-11 {
    flex: 0 0 91.66667%;
    max-width: 91.66667%;
}
  
.c-12 {
    flex: 0 0 100%;
    max-width: 100%;
}

@media (min-width:740px){
    .row{margin: 0 -8px;}
    .col{ padding: 0 8px;}
    .m-0 {
        display: none;
    }
    .m-1,
    .m-2,
    .m-3,
    .m-4,
    .m-5,
    .m-6,
    .m-7,
    .m-8,
    .m-9,
    .m-10,
    .m-11,
    .m-12 {
        display: block;
    }
    .m-1 {
        flex: 0 0 8.33333%;
        max-width: 8.33333%;
    }
    .m-2 {
        flex: 0 0 16.66667%;
        max-width: 16.66667%;
    }
    .m-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .m-4 {
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }
    .m-5 {
        flex: 0 0 41.66667%;
        max-width: 41.66667%;
    }
    .m-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .m-7 {
        flex: 0 0 58.33333%;
        max-width: 58.33333%;
    }
    .m-8 {
        flex: 0 0 66.66667%;
        max-width: 66.66667%;
    }
    .m-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }
    .m-10 {
        flex: 0 0 83.33333%;
        max-width: 83.33333%;
    }
    .m-11 {
        flex: 0 0 91.66667%;
        max-width: 91.66667%;
    }
    .m-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}
@media (min-width:1113px){
    .row{margin: 0 -12px;} 
    .col{padding: 0 12px;}
    .l-0 {
        display: none;
    }
    .l-1,
    .l-2,
    .l-2-4,
    .l-3,
    .l-4,
    .l-5,
    .l-6,
    .l-7,
    .l-8,
    .l-9,
    .l-10,
    .l-11,
    .l-12 {
        display: block;
    }
    .l-1 {
        flex: 0 0 8.33333%;
        max-width: 8.33333%;
    }
    .l-2 {
        flex: 0 0 16.66667%;
        max-width: 16.66667%;
    }
    .l-2-4 {
        flex: 0 0 20%;
        max-width: 20%;
    }
    .l-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .l-4 {
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }
    .l-5 {
        flex: 0 0 41.66667%;
        max-width: 41.66667%;
    }
    .l-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .l-7 {
        flex: 0 0 58.33333%;
        max-width: 58.33333%;
    }
    .l-8 {
        flex: 0 0 66.66667%;
        max-width: 66.66667%;
    }
    .l-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }
    .l-10 {
        flex: 0 0 83.33333%;
        max-width: 83.33333%;
    }
    .l-11 {
        flex: 0 0 91.66667%;
        max-width: 91.66667%;
    }
    .l-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}
/* PC */
@media(min-width:1024px )and (max-width:1239px){
    .grid.wide{width: 984px;}
    .wide .row{margin: 0 -12px;}
    .wide .col{padding: 0 12px;}
    .wide .l-0 {
        display: none;
    }
    .wide .l-1,
    .wide .l-2,
    .wide .l-2-4,
    .wide .l-3,
    .wide .l-4,
    .wide .l-5,
    .wide .l-6,
    .wide .l-7,
    .wide .l-8,
    .wide .l-9,
    .wide .l-10,
    .wide .l-11,
    .wide .l-12 {
        display: block;
    }
    .wide .l-1 {
        flex: 0 0 8.33333%;
        max-width: 8.33333%;
    }
    .wide .l-2 {
        flex: 0 0 16.66667%;
        max-width: 16.66667%;
    }
    .wide .l-2-4 {
        flex: 0 0 20%;
        max-width: 20%;
    }
    .wide .l-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .wide .l-4 {
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }
    .wide .l-5 {
        flex: 0 0 41.66667%;
        max-width: 41.66667%;
    }
    .wide .l-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .wide .l-7 {
        flex: 0 0 58.33333%;
        max-width: 58.33333%;
    }
    .wide .l-8 {
        flex: 0 0 66.66667%;
        max-width: 66.66667%;
    }
    .wide .l-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }
    .wide .l-10 {
        flex: 0 0 83.33333%;
        max-width: 83.33333%;
    }
    .wide .l-11 {
        flex: 0 0 91.66667%;
        max-width: 91.66667%;
    }
    .wide .l-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}
/* PC - TABLET */
@media(min-width:740px )and (max-width:1023px){
    .grid.wide{width: 644px;}
}