@media (min-width: 1024px) {
#triangle-ribbon-box {
    position: absolute;
    top: 3.5em;
    left: 0em;
    margin: 0 auto;
    width: 0px;
    height: 0;
    border-top: 15px solid transparent;
    border-left: 15px solid #42ac82;
    border-bottom: 15px solid transparent;
    transform: rotate(180deg);
}

.triangle-right {
    position: absolute;
    top: calc(50% - 15px);
    right: -22px;
    background-color: #ff0033;
    width: 30px;
    height: 30px;
    transform: rotate(45deg)
}

.triangle-left {
    position: absolute;
    top: calc(50% - 15px);
    left: -12px;
    width: 30px;
    height: 30px;
    background-color: #ff0033;
    border-radius: .4em;
    transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    -o-transform: rotate(225deg)
}

.border-products-left {
    border-left: 11px solid #f03
}

.border-products-right {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    border-right: 11px solid #f03
  
}
.border-products-top {
    border-top: 11px solid #f03
}
}