.bc-discount-banner {
  .offer--box {
    width: 100%;
    height: 100%;
    position: relative;
    margin-bottom: 20px;
    img {
      max-width: 100%;
      display: block;
      height: 100%;
      margin: auto;
      border-radius: $bcb-shoppingexperiences-radius + px;
    }
    .overlay {
      position: absolute;
      top: 10%;
      width: 80%;
      height: 80%;
      background: $bcb-shoppingexperiences-TwoColumnsBannerOverlay;
      left: 10%;
      transition: 0.8s;
      border-radius: $bcb-shoppingexperiences-radius + px;
      overflow: hidden;
      .offer--details {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        span {
          font-size: 18px;
          font-weight: 400;
          line-height: 40px;
          display: block;
        }
        h1 {
          font-size: 30px;
          font-weight: 600;
          line-height: 40px;
          margin: 5px 0 6px;
          padding: 0 15px;
        }
        .title {
          @if $bcb-google-font-import == "1" {
            font-family: $bcb-googlefont-familyHeadline;
            font-weight: $bcb-googlefont-familyHeadlinewhight;
          } @else {
            font-family: $sw-font-family-headline;
          }
          font-size: 30px;
          font-weight: 600;
          line-height: 40px;
          margin: 5px 0 6px;
          padding: 0 15px;
        }
        .offer--action {
          margin-top: 30px;
          display: inline-block;
          a {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            font-weight: 600;
            border-radius: $bcb-shoppingexperiences-btn-radius + px;
            text-decoration: none;
            text-transform: uppercase;
            height: 45px;
            min-width: 200px;
            line-height: normal;
          }
        }
      }
      &:hover {
        transform: scale(1.1);
      }
    }
  }
}

@media screen and (max-width: 1024px) {
  .bc-discount-banner {
    .offer--box {
      .overlay {
        .offer--details {
          h1 {
            font-size: 24px;
            line-height: 40px;
            margin: 8px 0 10px;
          }
          .title {
            font-size: 24px;
            line-height: 40px;
            margin: 8px 0 10px;
          }
          span {
            font-size: 15px;
          }
        }
      }
    }
  }
}

@media (max-width: 767.98px) {
  .bc-discount-banner {
    .row {
      .col-md-6 {
        &:first-child {
          margin-bottom: 30px;
        }
      }
    }
  }
}

@media (max-width: 575.98px) {
  .bc-discount-banner {
    .offer--box {
      .overlay {
        position: absolute;
        top: 4%;
        width: 95%;
        height: 90%;
        background: $bcb-whiteColor;
        left: 2%;
      }
    }
  }
}

@media screen and (max-width: 480px) {
  .bc-discount-banner {
    .offer--box {
      .overlay {
        .offer--details {
          span {
            font-size: 12px;
            font-weight: 500;
          }
          h1 {
            font-size: 20px;
            line-height: 40px;
            margin: 8px 0 10px;
          }
          .title {
            font-size: 20px;
            line-height: 40px;
            margin: 8px 0 10px;
          }
        }
      }
    }
  }
}
