JSFiddle - React, Tailwind, and code Playground

by ian_smithz

CSS

.hp-dotweekend-lap .banner__img-align {
  left: 51%;
}

.hp-dotweekend-lap .banner--var5 .banner__deal {
  height: 138px;
  padding-top: 10px;
  background: #fff200;
  border-bottom: 15px solid #ed1c24;
}

.hp-dotweekend-lap img#product_brand_img {
  margin-bottom: 12px;
}

.hp-dotweekend-lap .banner__deal-value.dotweekend {
  font-size: 76px;
  color: #ed1c24;
  margin-bottom: 0;
}

.hp-dotweekend-lap .banner__deal-text.dotweekend {
  font-size: 30px;
  color: #000;
  display: block !important;
  line-height: 1.2;
}

.hp-dotweekend-lap .banner--var5 .banner__product-wrapper {
  height: 215px;
}

.hp-dotweekend-lap .banner__bullets {
  width: 350px;
}

@media (max-width: 64em) and (min-width: 40.063em) {
  .hp-dotweekend-lap .banner--var5 .banner__img-align {
    left: 33%;
    bottom: -7px;
  }

  .hp-dotweekend-lap .banner--var5 .banner__product-wrapper {
    width: 288px;
  }

  .hp-dotweekend-lap .banner__product-icon {
    margin-bottom: 15px;
  }

  .hp-dotweekend-lap .banner__prod-title {
    width: 84%;
  }

  .hp-dotweekend-lap .banner__bullets {
    display: none;
  }
}

@media (max-width: 40em) {
  .hp-dotweekend-lap .banner--var5 .banner__img-align {
    left: 35%;
    bottom: -10px;
  }

  .hp-dotweekend-bosch .banner--var5 .banner__img-align {
    left: 35%;
  }

  .hp-dotweekend-lap .banner--var5 .banner__deal {
    height: 90px;
    border-bottom: 10px solid #ed1c24;
  }

  .hp-dotweekend-lap .banner__deal-value.dotweekend {
    font-size: 42px;
  }

  .hp-dotweekend-lap .banner__deal-text.dotweekend {
    font-size: 16px !important;
  }

  .hp-dotweekend-lap .banner--var5 .banner__product-wrapper {
    height: 95px;
    width: 165px;
  }

  .hp-dotweekend-lap img#product_brand_img {
    margin-bottom: 5px;
  }

  .hp-dotweekend-lap .banner__product-icon {
    max-height: 20px;
  }

  .hp-dotweekend-lap .banner__prod-title {
    width: 77%;
    font-size: 16px;
  }

  .hp-dotweekend-lap .banner__bullets {
    display: none;
  }
}