@media only screen and (max-width: 990px) {

    body, html {
        font-size: 13pt;
    }

    .crumbs .dirs a, .crumbs .dirs span {
        font-size: 0.8em;
        line-height: 1.3em;
    }

    .centered {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    h1 {
        font-size: 1.8em;
        font-weight: 700;
        margin: 0 0 var(--s) 0;
        color: #000;
    }

    h2 {
        font-size: 1.5em;
        line-height: 1.2em;
        margin: 0 0 var(--s) 0;
    }

    .cells {
        display: grid;
        gap: var(--m);
        grid-template-areas: "info" "second";
        grid-template-columns: 1fr;
    }

    .cells .info {
        line-height: 1.3em;
        padding-right: 0;
        overflow: hidden;
    }

    .userCarSelect {
        flex-direction: column;
        gap: var(--xxs);
        align-items: normal;
        margin-bottom: var(--m);
    }

    .userCarSelect select.inp {
        width: 100%;
        max-width: 100%;
    }

    .table .topic {
        margin-bottom: var(--m);
    }

    .table .topic h2 {
        font-size: 1.2em;
        font-weight: normal;
    }

    .tableLayout {
        overflow: auto;
        width: 100%;
        max-width: 100%;
    }

    .slide {
        overflow: auto;
        width: 100%;
        max-width: 100%;
    }

    .slide.opened {
        display: block;
        margin-bottom: var(--m);
    }

    .works .carWorks:not(:first-of-type), .workPrices {
        margin-top: var(--s);
    }

    .cells .info .bar {
        margin-top: var(--m);
        display: flex;
        gap: var(--m);
        width: 100%;
    }

    .cells .works {
        padding: var(--m) 0 0 0;
    }

    .cells aside .listCars li {
        padding: 0;
        font-size: 1em;
    }

    .cells aside .subMenu {
        margin-bottom: var(--s);
    }

    .cells aside .listCars li a {
        padding: var(--xs) var(--s);
    }


    .photos .mainPhoto a img {
        max-width: 100%;
    }

    .btn {
        height: 38px;
        font-size: 0.8em;
    }

    .page {
        padding: 0 var(--xs);
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .cap nav.menu {
        position: fixed;
        right: calc(-1 * var(--mobile-menu-width));
        top: 0;
        width: var(--mobile-menu-width);
        border-radius: 0 0 0 4px;
        max-height: 100vh;
        box-shadow: 0 3px 4px #00000037;
        transition: .2s;
        transition-delay: unset;
        z-index: 40;
    }

    .cap nav.menu .toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        transform: translate(-99%, 0);
        width: 56px;
        height: 56px;
        border-radius: var(--btn-corner-radius) 0 0 var(--btn-corner-radius);
        background: var(--menu-bg);
        color: white;
    }

    .cap nav.menu .toggle .i {
        width: 36px;
        height: 36px;
        margin: 0 0 1px 0;
        color: white;
        transition: all .1s;
    }

    .cap nav.menu.opened {
        right: 0;
    }

    .cap nav.menu ul {
        background: var(--menu-bg);
        padding: var(--s);
        margin: 0;
        display: flex;
        flex-direction: column;
        border-radius: 0 0 var(--btn-corner-radius) var(--btn-corner-radius);
    }

    .cap nav.menu ul li {
        width: 100%;
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: left;
    }

    .cap nav.menu ul li a {
        color: var(--color-text-white);
    }

    .cap nav.menu .bar {
        display: flex;
        align-self: baseline;
    }

    .cap nav.menu .bar .btn.outline {
        color: white;
        border-color: white;
    }

    header .cap {
        padding: var(--m) 0 var(--xs) 0;
        flex-direction: column;
        gap: var(--m);
    }

    .cap .openingHours {
        margin: 0;
        justify-content: left;
    }

    .cap .group .phone {
        margin-left: 0;
    }

    header .cap .left, header .cap .center, header .cap .right {
        width: 100%;
    }

    header .cap .left .logo {
        width: 100%;
        max-width: 100%;
    }

    header .cap .left .logo img {
        max-width: 100%;
        width: auto;
    }

    header .cap .right {
        display: block;
    }

    .crumbs {
        padding: var(--xs) 0;
    }

    .content {
        padding: var(--m) 0;
    }

    .contacts {
        padding: var(--m) 0;
        grid-template-columns: 1fr;
        grid-template-areas: "info" "map";
        grid-template-rows: auto 300px;
        gap: var(--m);
    }

    .contacts .info .metro {
        margin-bottom: var(--xs);
    }

    .contacts .info .address {
        margin-bottom: var(--xs);
    }

    .contacts .opening {
        margin-bottom: var(--xs);
    }

    .contacts .phones {
        margin-bottom: 0;
    }

    .advantages {
        padding: var(--s);
    }

    .advantages h2, .cars h2 {
        font-size: 1.3em;
        margin: 0 0 var(--s) 0;
        font-weight: normal;
    }

    .listAdvantages {
        grid-template-columns: 1fr;
        gap: var(--s);
    }

    .listAdvantages li {
        display: flex;
        gap: var(--xs);
        font-size: 1em;
        line-height: 1.3em;
    }

    .cars {
        display: block;
        padding: var(--m) 0;
    }

    .cars h2 {
        text-align: center;
    }

    .models {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        gap: 0;
        row-gap: var(--m);
        grid-template-columns: 50% 50%;
    }

    .models .model {
        width: 100%;
        display: flex;
    }

    .models .model ol a {
        padding: calc(var(--xxs) + 1px) var(--xxs) var(--xxs) var(--xxs);
        font-size: 75%;
    }

    .models .model h3 {
        text-overflow: ellipsis;
        overflow: hidden;
        width: 100%;
        white-space: nowrap;
        font-size: 100%;
        font-weight: bold;
        text-align: center;

        padding: 0 var(--xxs);
        margin: 0 0 var(--xxs) 0;

        max-width: 100%;

        box-sizing: border-box;
    }

    .models .model .photo {
        max-width: 100%;
        height: 60px;
    }

    .services {
        padding: var(--m) 0;
    }

    .services h2 {
        font-size: 1.3em;
        margin: 0 0 var(--m) 0;
    }

    .services h2 span.sup {
        display: none;
    }

    .services .group {
        display: grid;
        gap: var(--m);
        grid-template-columns: 1fr 1fr;
    }

    .services ul li {
        line-height: normal;

        display: flex;
    }

    .services ul li a {
        padding: 0;
        align-items: normal;
    }

    footer {
        padding: var(--m) 0;
    }

    .cellar {
        display: grid;
        gap: var(--s);
        padding: 0 var(--xs);
        grid-template-areas: "phones" "l1" "l2" "promo";
        grid-template-columns: 1fr;
    }

    .cellar ul li {
        padding: 0;
        margin: 0 0 var(--xxs) 0;
    }

    .contactCells {
        grid-template-columns: 3fr 1fr 1fr;
    }

    .table>.slide>.row.header, .table>.slide>.row.work {
        gap: var(--s);
        width: min-content;
    }

    .callback {
        padding: var(--m) 0;
    }

    .callback .go {
        margin-bottom: var(--s);
    }

    .callback .fields, .callback .fields .group {
        grid-template-columns: 1fr;
        gap: var(--xs);
    }


}