@media (min-width: 768px) and (max-width: 1109px) {
    /** --------------------- GENERAL start ---------------------**/
    html,
    body {
        width: 100%;
    }
    body{
        padding-top: 45px;
    }
    .wrap {
        width: 100%;
        padding: 0 25px;
        box-sizing: border-box;
    }

    /** --------------------- HEADER and FOOTER start ---------------------**/
    header{
        position: fixed;
        width: 100%;
        left: 0;
        top: 0;
        z-index: 100;
        background-color: var(--gen-white);
    }
    header .right a:not(:first-of-type), header .right .wrapper{
        margin-left: 10px;
    }
    header .right .lk{
        padding-left: 33px
    }
    header .right .lk.active:after{
        bottom: -3px;
        left: 17px;
    }
    header .right .lk.open{
        border-radius: 50%;
        border: 3px solid var(--my-blue);
        background-size: 75%;
        background-position: center;
    }
    header .right .lk span{
        display: none;
    }
    header .right .wrapper {
        height: 39px;
        display: flex;
        align-items: center;
    }
    header .left .city .selected{
        display: none;
    }
    header .left .menu .list ul .mob{
        display: block;
    }
    header .right .wrapper .list{
        top: 42px;
    }
    footer{
        padding: 20px 0 20px;
    }
    footer .wrap{
        flex-wrap: wrap;
    }
    footer .wrap a,
    footer .wrap p{
        width: 50%;
        text-align: center;
        margin: 5px 0;
    }
    footer .wrap p{
        order: 1;
    }
    /** --------------------- HEADER and FOOTER end ---------------------**/

    /** --------------------- MAIN GRID start ---------------------**/
    .grid .content{
        width: 100%;
    }
    .grid .cards .card{
        width: calc((100% - 24px) / 4);
    }
    .grid .cards .card:not(:nth-of-type(3n+3)){
        margin-right: initial;
    }
    .grid .cards .card:not(:nth-of-type(4n+4)){
        margin-right: 8px;
    }
    .swiper-container-item{
        height: 155px;
    }
    .cards .card .group .inf p, .cards .card .group .price .commission{
        font-size: 10px;
    }
    .cards .card .group .inf p img {
        height: 15px;
        margin-right: 5px;
    }
    .cards .card .group .price {
        display: block;
    }
    .cards .card .group .price p{
        font-size: 12px;
    }
    .cards .card .group .title p{
        font-size: 12px;
        line-height: 16px;
        min-height: 35px;
    }
    .cards .card .group .title, .cards .card .group .price, .cards .card .group .location {
        padding: 0 8px;
        box-sizing: border-box;
    }
    .cards .card .group .location{
        padding-bottom: 5px;
    }
    .cards .card .group .location p{
        font-size: 10px;
        margin-left: 7px;
    }
    .cards .card .group .location img{
        height: 15px;
    }
    .cards .card .group .tags{
        display: none;
    }
    .cards .card .image .special span{
        padding: 3px 10px;
        font-size: 7px;
    }
    .grid .button-up{
        display: none;
    }
    .grid .filters{
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: #fff;
        z-index: 99;
        box-sizing: border-box;
        padding: 50px 0 50px;
        overflow-y: scroll;
    }
    .grid .filters.open{
        display: block;
    }
    .grid .filters form{
        width: 340px;
        margin: 10px auto 0;
        position: relative;
        padding-bottom: 172px;
    }
    .grid .filters .group {
        margin-bottom: 10px;
    }
    .grid .filters .group.base label p:after,
    .grid .filters .group .range input,
    .grid .filters .group.circle label p,
    .grid .filters .group.tags label p,
    .grid .filters .seporation,
    .grid .filters .group .multiselect .heading,
    .grid .filters .group .multiselect .hide label p,
    .grid .filters .group.oval label p{
        background-color: var(--my-light-gray);
    }
    .grid .filters .group .title {
        font-size: 14px;
        margin: 0 0 10px 0;
    }
    .grid .filters .group.base label p{
        font-size: 14px;
    }
    .grid .filters .group.base label p:after{
        top: 0;
    }
    .grid .filters .group.base label input:checked + p::before{
        top: 4px
    }
    .grid .filters .group.circle {
        justify-content: flex-start;
    }
    .grid .filters .group.circle label:not(:last-of-type){
        margin-right: 10px;
    }
    .grid .filters .seporation{
        margin-top: 15px;
    }
    .grid .filters .reset{
        bottom: 0;
    }
    .grid .filters .buttons{
        bottom: 0;
        flex-wrap: wrap;
    }
    .grid .filters .buttons button,
    .grid .filters .buttons a{
        width: 100%;
        border-radius: 44px;
        font-size: 12px;
        margin-bottom: 15px;
    }
    .grid .filters .buttons button{
        display: flex;
        align-items: center;
        height: 34px;
        text-transform: uppercase;
    }
    .grid .filters .buttons a span{
        display: inline-block;
        margin-right: 15px;
        text-transform: uppercase;
        color: var(--gen-white);
        font-weight: 600;
    }
    .grid .filters .buttons .mob{
        display: flex;
        text-transform: uppercase;
        color: var(--my-gray);
        background: var(--gen-white);
        box-shadow: 0px 2px 4px rgb(0 0 0 / 25%);
        border-radius: 44px;
        text-align: center;
        align-items: center;
        font-weight: 600;
    }
    .open-filter{
        display: block;
        position: fixed;
        bottom: 50px;
        width: 206px;
        background-color: var(--my-blue);
        color: var(--gen-white);
        text-transform: uppercase;
        font-weight: 600;
        font-size: 10px;
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
        border-radius: 44px;
        text-align: center;
        padding: 10px;
        z-index: 20;
        left: 50%;
        transform: translate(-50%, 0);
    }
    .grid .right .recomends{
        display: none;
    }
    /** --------------------- MAIN GRID end ---------------------**/

    /** --------------------- DETAIL start ---------------------**/
    .detail .all-inf{
        flex-wrap: wrap;
    }
    .detail .all-inf .recomends{
        width: 100%;
    }
    .detail .all-inf .recomends .cards .card{
        width: calc((100% - 24px) / 4);
    }
    .detail .all-inf .recomends .cards .card:not(:nth-of-type(4n+4)){
        margin-right: 8px;
    }
    .detail .all-inf .recomends .title {
        display: block;
        font-weight: 600;
        font-size: 20px;
        color: var(--my-black);
    }
    .detail .heading, .detail .all-inf .content{
        width: 100%;
    }
    .detail .all-inf .content{
        margin-bottom: 48px;
    }
    .detail .heading .interface{
        margin: 10px 0;
    }
    .detail .all-inf .content .slider{
        width: calc(100% + 50px);
        margin-left: -25px;
    }
    .slider .swiper-container-product .swiper-pagination{
        display: block;
    }
    .gallery-thumbs .swiper-wrapper{
        flex-wrap: initial;
        transform: translate3d(0px, 0px, 0px);
    }
    .detail .all-inf .content:before{
        display: none;
    }
    .swiper-container-product.gallery-thumbs .swiper-slide:nth-of-type(8n+8){
        margin-right: 6px !important;
    }
    .swiper-container-product.gallery-thumbs .swiper-slide:last-of-type{
        margin-right: 0 !important;
    }
    .detail .all-inf .content .tags a{
        margin-top: 4px;
    }
    /** --------------------- DETAIL end ---------------------**/

    /** --------------------- 404 start ---------------------**/
    .p404 .cover{
        max-width: 915px;
        width: 100%;
        margin: 175px auto 0;
        padding: 20px 35px 20px 35px;
    }
    /** --------------------- 404 end ---------------------**/

    /** --------------------- ADS start ---------------------**/
    .ads .tabs__caption li{
        font-weight: 600;
        font-size: 10px;
        text-transform: uppercase;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
        border-radius: 44px;
        display: flex;
        width: 165px;
        padding: 10px 0;
        align-items: center;
        justify-content: center;
    }
    .ads .tabs__caption li:not(:last-of-type){
        margin-right: 10px;
    }
    .ads .tabs__caption li span{
        font-size: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 14px;
        height: 14px;
        background-color: var(--gen-white);
        color: var(--my-gray);
        border-radius: 50%;
        line-height: 10px;
    }
    .ads .tabs__caption li.active{
        color: var(--my-black);
    }
    .ads .tabs__caption li.active span{
        background-color: var(--my-blue);

    }
    .ads .tabs__content .object .inf{
        padding: 10px;
    }
    .ads .tabs__content .object .inf .title{
        font-size: 12px;
        line-height: 16px;
        min-height: 48px;
    }
    .ads .tabs__content .object .inf .price{
        font-size: 12px;
    }
    .ads .tabs__content .object .inf .location{
        font-size: 10px;
    }
    .ads .tabs__content .object .inf .location img{
        height: 15px;
        margin-right: 5px;
    }
    .ads .tabs__content .object .inf .statistic{
        margin: 10px 0 0;
    }
    .ads .tabs__content .object .inf .statistic img{
        margin-right: 5px;
        max-height: 16px;
    }
    .ads .tabs__content .object .inf p{
        font-size: 10px;
    }
    .ads .tabs__content .object .inf .interface{
        justify-content: space-between;
    }
    .ads .tabs__content .object .inf .interface a {
        width: calc((100% - 2px ) / 3);
    }
    .ads .tabs__content .object .inf .interface a:not(:last-of-type){
        margin-right: 0;
    }
    /** --------------------- ADS end ---------------------**/

    /** --------------------- COLLECTIONS start ---------------------**/
    .pattern .folders .block .inf .title,
    .del-folder .preview .block .inf .title{
        font-size: 12px;
        line-height: 16px;
        min-height: 48px;
    }
    .pattern .folders .block .imgs .item,
    .del-folder .preview .block .item{
        height: 78px;
    }
    .pattern .folders .block .imgs .item:only-child,
    .del-folder .preview .block .imgs .item:only-child{
        height: 156px;
    }
    .pattern .folders .block .inf .count,
    .del-folder .preview .block .inf .count{
        font-size: 12px;
    }
    .pattern .folders .block .inf,
    .del-folder .preview .block .inf{
        padding: 8px 3px 3px;
    }
    .pattern .folders .block .interface{
        padding: 0 3px 3px;
    }
    .del-folder .preview .block{
        width: 225px;
    }
    /** --------------------- COLLECTIONS end ---------------------**/

    /** --------------------- NEW OBJECT PAGE start ---------------------**/
    .new-obj .tabs .wrapper .tabs__categories{
        display: flex;
    }
    .new-obj .tabs .wrapper .tabs__categories label{
        padding: 2px 10px 4px;
        align-items: center;
        display: flex;
        text-align: center;
    }
    .new-obj form .group.radio label span,
    .new-obj form .group.checkbox .case label span {
        padding: 10px 17px;
    }
    .new-obj form .group.checkbox .case{
        width: calc(100% - 235px);
    }
    .new-obj form .group .footnote .hide{
        width: 255px;
    }
    .new-obj form .group .error{
        display: none;
    }
    /** --------------------- NEW OBJECT PAGE end ---------------------**/

    /** --------------------- FULL MAP start ---------------------**/
    .fullmap{
        margin-bottom: 20px;
    }
    .fullmap .grid{
        position: initial;
        width: 100%;
    }
    .fullmap .grid .cards{
        overflow: initial;
    }
    .fullmap .cards .card:not(:nth-of-type(2n+2)), .fullmap .grid .cards .card:not(:nth-of-type(2n+2)){
        margin: 0;
    }
    .fullmap .grid .cards-wrapper .top-inf .right a{
        display: none;
    }
    .fullmap .grid .cards .card{
        width: calc((100% - 8px) / 3);
    }
    .fullmap .grid .cards .card:not(:nth-of-type(4n+4)){
        margin: 0;
    }
    .fullmap .grid .cards-wrapper{
        background-color: var(--gen-white);
        padding: 10px 8px 10px 8px;
    }
    /** --------------------- FULL MAP end ---------------------**/
}