@media(min-width:300px){
    .head-info h1{
        line-height: 1.3;
    }
    .row{
        display: grid;
        grid-template-columns: 100%;
        grid-gap: 40px;
    }
    #markat .row{
        grid-template-columns: repeat(2,50%);
        grid-gap: 10px;
    }
    nav .btn{
        margin-left: 40px;
      }
      #head{
        height: 197vh;
    }
    .tel{
        flex-direction: column;
    }
    .tel .btn:first-of-type{
        margin-bottom: 3px;
    }
}

@media(min-width:300px)and (max-width:500px){
    .tel{
        flex-direction: column;
    }
    .tel .btn:first-of-type{
        margin-bottom: 3px;
    }
}
@media(min-width:400px){
    #head{
        height: 135vh;
    }
}
@media(min-width:500px){
    #head{
        height: 115vh;
    }
}
@media(min-width:768px){
    .container{
        width: 750px;
    }
    #form{
        margin-top: 65px;
    }
    #markat .row{
        grid-template-columns: repeat(3,33%);
        grid-gap: 10px;
    }
    .tel{
        flex-direction: row;
    }
}
@media(min-width:992px){
    .container{
        width: 970px;
    }
    nav .list{
        display: inline-block;
    }
}
@media(min-width:1200px){
    .container{
        width: 1170px;
    }
    .row{
        grid-template-columns: repeat(2,50%);
    }
    #markat .row{
        grid-template-columns: repeat(5,20%);
        grid-gap: 10px;
    }
}