.model_details {
    display               : grid;
    grid-gap              : 20px;
    grid-template-areas   :
        ". collection pictures info ."
        ". form variants pack .";
    grid-template-columns : auto 300px 300px 300px auto;
    margin                : 15px;
}

.vehicle_collection {
    grid-area : collection;
}

.vehicle_form {
    grid-area : form;
}

.vehicle_pictures {
    grid-area : pictures;
}

.vehicle_variants {
    grid-area : variants;
}

.vehicle_info {
    grid-area : info;
}

.vehicle_info > h3 {
    align-items     : center;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : nowrap;
    justify-content : space-between
}

.vehicle_info > h3 button.s1 {
    padding : 2px 10px;
}

.vehicle_pack {
    grid-area : pack;
}

.model_details h3 {
    border-bottom : 1px solid #E8E3DF;
    margin        : 20px 0 10px 0;
    padding       : 0 10px;
}

.model_details > * h3:first-child {
    margin-top : 0;
}

.model_details .vehicle_collection,
.model_details .vehicle_form {
    text-align : center;
}

.model_details .vehicle_variants .item {
    background                  : #B5A89C;
    border                      : 1px solid #796E66;
    border-radius               : 15px;
    -webkit-border-radius       : 15px;
    -moz-border-radius          : 15px;
    display                     : flex;
    flex-direction              : row;
    flex-wrap                   : nowrap;
    gap                         : 10px;
    justify-content             : center;
    margin-bottom               : 10px;
    padding                     : 5px;
    position                    : relative;
    transition-duration         : 0ms;
    -webkit-transition-duration : 0ms;
    -moz-transition-duration    : 0ms;
    -o-transition-duration      : 0ms;
}

.model_details .vehicle_variants .item > * {
    width : 50%;
}

.model_details .vehicle_variants .item .mini {
    display : none;
}

.model_details .vehicle_variants .item .inventory_box {
    position : absolute;
    top      : 2px;
    right    : 2px;
}

.model_details .vehicle_variants .item .inventory_box i {
    font-size : 20px !important;
}

.model_details .vehicle_variants .item .details {
    position : relative;
    z-index  : 2;
}

.model_details .vehicle_variants .item .counter_box {
    bottom     : 2px;
    color      : #FFFFFF;
    font-size  : 50px;
    position   : absolute;
    opacity    : 0.2;
    right      : 10px;
    text-align : center;
    z-index    : 1;
}

#models_submenu {
    display                    : flex;
    align-items                : center;
    justify-content            : center;
    gap                        : 16px;

    width                      : 100%;
    overflow-x                 : auto;
    overflow-y                 : hidden;
    flex-wrap                  : nowrap;

    -webkit-overflow-scrolling : touch;
    scroll-behavior            : smooth;
}

#models_submenu .submenu_side,
#models_submenu .submenu_center {
    flex : 0 0 auto;
}

#models_submenu .submenu_side {
    display     : flex;
    align-items : center;
    gap         : 16px;
}

#models_submenu .submenu_center {
    display         : flex;
    align-items     : center;
    justify-content : center;
}

#models_submenu .submenu_left .submenu_item,
#models_submenu .submenu_right .submenu_item {
    display : block;
    width   : 100px;
    flex    : 0 0 auto;
    filter  : grayscale(100%);
    opacity : 0.5;
}

#models_submenu .submenu_left .submenu_item img,
#models_submenu .submenu_right .submenu_item img,
#models_submenu .submenu_center img {
    display : block;
}

#models_submenu .submenu_left .submenu_item img,
#models_submenu .submenu_right .submenu_item img {
    width : 100%;
}

#models_submenu .submenu_left .submenu_item:hover,
#models_submenu .submenu_right .submenu_item:hover {
    filter  : grayscale(0%);
    opacity : 1;
}

@media (max-width : 820px) {
    #models_submenu .submenu_center img {
        height : 50px;
        width  : auto;
    }

    #models_submenu .submenu_left .submenu_item,
    #models_submenu .submenu_right .submenu_item {
        width : 50px;
    }

    #models_submenu .submenu_left img,
    #models_submenu .submenu_right img {
        height : 25px;
        width  : auto !important;
    }
}

@media (max-width : 1150px) {
    .model_details {
        grid-template-areas   :
            ". pictures info ."
            ". variants pack ."
            ". collection form .";
        grid-template-columns : auto 300px 300px auto;
    }
}

@media (max-width : 820px) {
    .model_details {
        grid-template-areas   :
            "pictures"
            "info"
            "pack"
            "collection"
            "form"
            "variants";
        grid-template-columns : auto;
    }
}