.black-ribbon {
  position: fixed;
  z-index: 9999;
  width: 70px;
  height: auto;
  object-fit: contain;
}

.stick-left {
  left: 0;
}

.stick-right {
  right: 0;
}

.stick-top {
  top: 0;
}

.stick-bottom {
  bottom: 0;
}

/* max-width: 576px */
@media (max-width: 576px) {
  .black-ribbon.stick-right {
    width: 70px !important;
    max-width: 70px;
  }
}

/* min-width: 577px and max-width: 767px */
@media (min-width: 577px) and (max-width: 767px) {
  .black-ribbon.stick-right {
    width: 70px !important;
    max-width: 70px;
  }
}

/* min-width: 768px and max-width: 991px */
@media (min-width: 768px) and (max-width: 991px) {
  .black-ribbon.stick-right {
    width: 80px !important;
    max-width: 80px;
  }
}

/* min-width: 992px and max-width: 1023px */
@media (min-width: 992px) and (max-width: 1023px) {
  .black-ribbon.stick-left {
    width: 50px !important;
    max-width: 50px;
    top: 2px;
    left: 2px;
  }
}

/* min-width: 1024px and max-width: 1279px */
@media (min-width: 1024px) and (max-width: 1279px) {
  .black-ribbon.stick-left {
    width: 52px !important;
    max-width: 52px;
  }
}

/* min-width: 1280px and max-width: 1499px */
@media (min-width: 1280px) and (max-width: 1499px) {
  .black-ribbon.stick-left {
    width: 46px !important;
    max-width: 46px;
    top: 2px;
    left: 2px;
  }
}

/* min-width: 1500px and max-width: 1679px */
@media (min-width: 1500px) and (max-width: 1679px) {
  .black-ribbon.stick-left {
    width: 54px !important;
    max-width: 54px;
    top: 2px;
    left: 2px;
  }
}

/* min-width: 1680px */
@media (min-width: 1680px) {
  .black-ribbon.stick-left {
    width: 60px !important;
    max-width: 60px;
    top: 2px;
    left: 2px;
  }
}