.badge-1 {background: linear-gradient(to right, #007BFF 0%, #0056b3 100%);}
.badge-2 {background: linear-gradient(to right, #28a745 0%, #1e7e34 100%);}
.badge-3 {background: linear-gradient(to right, #dc3545 0%, #bd2130 100%);}
.badge-4 {background: linear-gradient(to right, #ffc107 0%, #d39e00 100%);}
.badge-5 {background: linear-gradient(to right, #17a2b8 0%, #117a8b 100%);}
.badge-6 {background: linear-gradient(to right, #6c757d 0%, #545b62 100%);}
.badge-7 {background: linear-gradient(to right, #F4623A 0%, #d6370c 100%);}
.badge-8 {background: linear-gradient(to right, #6610f2 0%, #510bc4 100%);}
.badge-9 {background: linear-gradient(to right, #e83e8c 0%, #c2185b 100%);}
.badge-10 {background: linear-gradient(to right, #20c997 0%, #1aa179 100%);}
.badge-11 {background: linear-gradient(to right, #FF6B6B 0%, #FF4747 100%);}
.badge-12 {background: linear-gradient(to right, #A29BFE 0%, #6C5CE7 100%);}
.badge-13 {background: linear-gradient(to right, #55E6C1 0%, #00B894 100%);}
.badge-14 {background: linear-gradient(to right, #FDCB6E 0%, #FFA502 100%);}
.badge-15 {background: linear-gradient(to right, #74B9FF 0%, #0984E3 100%);}
.badge-16 {background: linear-gradient(to right, #FD79A8 0%, #E84393 100%);}
.badge-17 {background: linear-gradient(to right, #636E72 0%, #2D3436 100%);}
.badge-18 {background: linear-gradient(to right, #00CEC9 0%, #00B894 100%);}
.badge-19 {background: linear-gradient(to right, #B2BEC3 0%, #636E72 100%);}
.badge-20 {background: linear-gradient(to right, #E17055 0%, #D63031 100%);}
[class^="badge-"] {
    display: inline-block;
    transform: translateY(-12px);
    font-size: .75rem;
    letter-spacing: 0.05em;
    color: #ffffff;
    border-radius: 1rem;
    padding: .15rem .275rem;
    line-height: 1;
    font-weight: bold;
}