.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;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)}.ribbon-2,.ribbon-3{position:absolute;inset:var(--t) calc(-1*var(--f)) auto auto;color:#fff;border-top-left-radius:var(--r);border-bottom-left-radius:var(--r)}.ribbon-3{--f:6px;--r:18px;--t:12px;padding:6px 16px 6px calc(14px + var(--r));background:linear-gradient(135deg,#ff512f,#dd2476);font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;box-shadow:0 4px 10px rgba(0,0,0,.2)}.ribbon-3:before{content:"";position:absolute;top:0;right:0;border-width:var(--f);border-style:solid;border-color:rgba(0,0,0,.3333333333) rgba(0,0,0,.3333333333) rgba(0,0,0,0) rgba(0,0,0,0)}.ribbon-3:after{content:"✔";position:absolute;left:8px;top:50%;transform:translateY(-50%);background:#fff;color:#dd2476;width:18px;height:18px;font-size:11px;border-radius:50%;display:flex;align-items:center;justify-content:center}.box{margin:0 auto;position:relative}