convert to new style instructions:

1 Copy the new banner cols and sub banner cols in the html - need to delete/comment out burst-wrapper, brand-logo, award-container and move accolade-container 

2 mobile - remove .mobile-awards-container and move award html inside .vehicle-details-section

3 In CSS

if the model name should be uppercase add text-transform: uppercase; to .oomdo-banners .outer-title-container

comment out/add properties to the following things:

.oomdo-banners .mobile-offers .vehicle-details-section {
    width: 100%;
    position: relative;
    padding-bottom: 30px;
}

.oomdo-banners .mobile-offers .award {
    /* display: flex ; */
    width: 100px;
    height: 40px;
    /* border: 1px solid purple; */
    position: absolute;
    top: 100px;
    left: 20px;
}


.oomdo-banners .mobile-offers .vehicle-img-wrapper {
    /*width: 272px;
    margin: auto;*/
    margin-top: 105px;
    height: 175px;
}

.oomdo-banners .mobile-offers .vehicle-img {
    /*width: 320px;
    margin-left: -17px;*/
    max-height: 175px;
    max-width: max-content;
    margin-left: auto;
    margin-right: auto;
}

.oomdo-banners .outer-title-container {
    width: 450px;
    height: 150px;
    margin-top: 20px;
    color: #fff;
    text-transform: uppercase;
    /*background: #000;
    background: -webkit-linear-gradient(right, #000, rgba(0, 0, 0, 0.11)); 
    background: -o-linear-gradient(right, #000, rgba(0, 0, 0, 0.11)); 
    background: -moz-linear-gradient(right, #000, rgba(0, 0, 0, 0.11)); 
    background: linear-gradient(to right, #000 , rgba(0, 0, 0, 0.11)); */
}

/*.oomdo-banners .oomdo-banners-content {
    float: right;
    padding-right: 15px;
}*/

.oomdo-banners .vehicle-img-wrapper {
/*    width: 450px;
    height: 270px;
    margin: auto;*/
    display: flex;
    align-items: flex-end;
}

@media (min-width: 600px) {
    .oomdo-banners .mobile-offers .vehicle-img-wrapper {
        /*width: 500px;*/
        margin-top: 20px;
        height: 263px;
    }

    .oomdo-banners .mobile-offers .vehicle-img {
        /*width: 100%;
        margin-left: -6px;*/
        max-height: 263px;
    }

    .oomdo-banners .mobile-offers .award {
        top: initial;
        bottom: 40px;
        left: initial;
        right: 25px;
    }
}

@media (min-width: 850px) {
    .oomdo-banners .mobile-offers .vehicle-img-wrapper {
        /*width: 540px;*/
        margin-top: 0px;
        height: 283px;
    }

    .oomdo-banners .mobile-offers .vehicle-img {
        /*margin-left: 20px;*/
        max-height: 283px;
    }
}

/*@media (min-width: 1200px) {
    .oomdo-banners .vehicle-img-wrapper {
        width: 505px;
    }
}*/

/*@media (min-width: 1500px) {

    .oomdo-banners .oomdo-banners-content {
        padding-right: 100px;
    }

}*/

/*@media (min-width: 1700px) {

    .oomdo-banners .oomdo-banners-content {
        padding-right: 175px;
    }

}*/

/*@media (min-width: 1800px) {

    .oomdo-banners .oomdo-banners-content {
        padding-right: 210px;
    }

}*/

move min-width: 992px down more to where it should be which is right above min-width: 1200px
add everything between /*new styles*/ under min-width: 992px and under min-width: 1200px

add:
@media (min-width: 1100px) {
    .oomdo-banners .inner-title-container {
        padding-top: 40px;
    }

    .oomdo-banners .accolade-container img {
        max-height: 80px;
    }
}



