/******** Controls the height underneath the text block - padding-bottom, sets background colour for the component *********/
.editorial_wrapper {
  background: #fff;
  padding-bottom: 10px;
  width: 100%;
}
/******** Gradient/image on the left *********/
.left_side {
  background:#000;
  height: 500px;
  width: 950px;
  margin: 0;
}
/******** Gradient/image on the right *********/

.right_side {
 background:#000;
  width: 950px;
  height: 500px;
  margin: 0;
}
/******** Change the background colour - sets border at bottom *********/
.banner{
  display: flex;
  align-items: stretch;
  background-color: #fff;
  height: 500px;
  border-bottom: 10px solid #fff;
}
/******** Change the background image - controls the width of image sets border either side *********/

.hero_image {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2060px;
    background: url("/-/media/images/Brand/Bosch/bosch_desktop.jpg") no-repeat center;

}


 /**** 1600 breakpoint | flex set to 100% *********/
@media only screen and (max-width: 1600px) {

  .hero_image {
    flex: 0 0 100%;
    border: none;
    background-size: cover;
  }

}

/**** 1366 breakpoint | Banner height change 350 *********/

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

  .banner {
    height: 350px;
  }

  .hero_image {
    background: url("/-/media/images/Brand/Bosch/bosch_laptop.jpg") no-repeat center;
    background-size: cover;
  }

}
/**** 1200 breakpoint | Border bottom 8px *********/
@media only screen and (max-width: 1200px) {

  .banner {
    border-bottom: 8px solid #fff;
  }
  
}
/**** 767 breakpoint | Banner height change 250 *********/
@media only screen and (max-width: 767px) {

  .banner {
    height: 250px;
  }
  .hero_image {
    background: url("/-/media/images/Brand/Bosch/bosch_mob_l.jpg") no-repeat center;
    background-size: cover;
  }
 
}
/**** 767 breakpoint | Banner height change 240 *********/
@media only screen and (max-width: 440px) {

  .hero_image {
    background: url("/-/media/images/Brand/Bosch/bosch_mob.jpg")
      no-repeat center;
    background-size: cover;
  }

}