.hotwheels_header {
    align-items     : center;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : nowrap;
    justify-content : space-between;
    margin          : 25px;
}

.hotwheels_header img {
    height : 100px;
}

.vehicle_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;
}

.vehicle_details h3 {
    border-bottom : 1px solid #E8E3DF;
    margin        : 20px 0 10px 0;
    padding       : 0 10px;
}

.vehicle_details > * h3:first-child {
    margin-top : 0;
}

.vehicle_details .vehicle_collection,
.vehicle_details .vehicle_form {
    text-align : center;
}

.vehicle_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;
}

.vehicle_details .vehicle_variants .item > * {
    width : 50%;
}

.vehicle_details .vehicle_variants .item .mini {
    display : none;
}

.vehicle_details .vehicle_variants .item .inventory_box {
    position : absolute;
    top      : 2px;
    right    : 2px;
}

.vehicle_details .vehicle_variants .item .inventory_box i {
    font-size : 20px !important;
}

.vehicle_details .vehicle_variants .item .details {
    position : relative;
    z-index  : 2;
}

.vehicle_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;
}

@media (max-width : 1150px) {
    .vehicle_details {
        grid-template-areas   :
            ". pictures info ."
            ". variants pack ."
            ". collection form .";
        grid-template-columns : auto 300px 300px auto;
    }
}

@media (max-width : 820px) {
    .vehicle_details {
        grid-template-areas   :
            "pictures"
            "info"
            "pack"
            "collection"
            "form"
            "variants";
        grid-template-columns : auto;
    }
}