<div class="porto-block">
  <style>
    .shop-banner .container {
      max-width: 1180px;
      padding: 0;
    }
    .porto-ibanner-layer {
      position: absolute;
    }
    .col-auto {
      flex: 0 0 auto;
      max-width: none;
    }
    .col-auto > .vc_column-inner {
      display: inline-block;
      width: auto;
    }
    .banner-container .container,
    body.wide .container .container {
      max-width: 1180px;
    }
    .coupon-sale-text {
      padding: 0.175em 0.3em;
      position: relative;
      transform: rotate(-1.5deg);
      white-space: nowrap;
      letter-spacing: 0;
    }
    .coupon-sale-text i {
      font-style: normal;
      position: absolute;
      left: -2.25em;
      top: 50%;
      transform: translateY(-50%) rotate(-90deg);
      font-size: 0.4em;
      opacity: 0.6;
      letter-spacing: 0;
    }
    .coupon-sale-text sub {
      position: absolute;
      left: 100%;
      margin-left: 0.25rem;
      bottom: 0.3em;
      font-size: 70%;
      line-height: 1;
    }
    .coupon-sale-text.heading-light i,
    .coupon-sale-text.heading-light sub {
      color: #222529;
    }
  </style>
  <div class="container-banner">
    <div class="row shop-banner mb-0">
      <div class="col-md-12">
        <div class="wpb_wrapper vc_column-inner">
          <div class="porto-ibanner mb-0" style="background: #f4f4f4; min-height: 250px;">
            <img src='{{media url="wysiwyg/smartwave/porto/category/banner/shop19_shop_banner.jpg"}}' />
            <div class="porto-ibanner-desc no-padding d-flex">
              <div class="porto-ibanner-layer" style="width: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%);">
                <div class="vc_row wpb_row vc_inner row align-items-center justify-content-center justify-content-md-start mx-0">
                  <div class="container">
                    <div class="row">
                      <div class="mb-4 mb-md-0 col-md-4 col-xl-5">
                        <div class="wpb_wrapper vc_column-inner">
                          <h3 style="font-size: 1.975em; line-height: 1.2; text-align: center;" class="vc_custom_heading mb-0 text-md-right text-uppercase">
                            Top Electronic<br />
                            Deals
                          </h3>
                        </div>
                      </div>
                      <div class="mb-4 mb-md-0 col-md-4 col-xl-2">
                        <div class="wpb_wrapper vc_column-inner">
                          <div class="btn-container mb-0 text-center"><button class="btn btn-modern btn-lg btn-dark">View Sale</button></div>
                        </div>
                      </div>
                      <div class="col-auto col-md-4">
                        <div class="wpb_wrapper vc_column-inner">
                          <div style="font-size: 1em; line-height: 1.8; text-align: center; font-weight: 700;" class="vc_custom_heading coupon-sale-text background-color-dark mb-2 text-md-left heading-light">Exclusive COUPON</div>
                          <div style="font-size: 1.4em; line-height: 1; text-align: center; font-weight: 700;" class="vc_custom_heading coupon-sale-text background-color-secondary d-inline-block heading-light">
                            <i>UP TO</i>$100<sub>OFF</sub>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
