.ribbon{background:#3c485f;color:#fff;height:18px;line-height:18px;font-size:8px;text-align:center;width:40px;position:relative;margin:0 auto 1px}.ribbon:after,.ribbon:before{content:"";border:9px solid #3c485f;border-left-width:7px;position:absolute;top:0}.ribbon:before{border-left-color:rgba(0,0,0,0);left:-15px}.ribbon:after{border-left-color:#3c485f;right:-15px}.ribbon-2{--f:0px;--r:15px;--t:10px;margin-top:12px;inset:var(--t) calc(-1*var(--f)) auto auto;padding:0 10px var(--f) calc(10px + var(--r));background:#bd1550;box-shadow:0 calc(-1*var(--f)) 0 inset rgba(0,0,0,.3333333333);border-top-left-radius:var(--r);border-bottom-left-radius:var(--r)}.ribbon-2,.ribbon-3{position:absolute;color:#fff}.ribbon-3{--r:14px;--t:12px;top:var(--t);right:0;padding:6px 12px 6px 28px;background:linear-gradient(135deg,#ff512f,#dd2476);font-size:12px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;border-radius:var(--r) 0 0 var(--r);box-shadow:0 6px 14px rgba(0,0,0,.12)}.ribbon-3:after{content:"";position:absolute;left:10px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:hsla(0,0%,100%,.9)}.box{margin:0 auto;position:relative}