:root {
    --badge-width: 80px; /* szerokość całego kafelka - zmieniaj żeby skalować */
    --fg: #000; /* kolor napisów na ciemnym tle */
    --ribbon-bg: #fff; /* kolor paska YEARS */
    --ribbon-text: #000; /* kolor tekstu na pasku */
    --gap: 8px;
}
.badge{
    width: var(--badge-width);
    color: var(--fg);
    user-select:none;
    padding-top: 0px;
    padding-bottom: 0px;
}

/* górny rok z podkreśleniem */
.range{
    font-size: calc(var(--badge-width) * 0.055);
    font-weight:700;
    display:block;
    margin-bottom: 6px;
    position:relative;
    width:100%;
}
.range::after{
    content:"";
    position:absolute;
    left: 6%;
    bottom: -8px;
    width: 15%;
    height: 4px;
    background: rgba(255,255,255,0.85);
    border-radius:2px;
}

/* duży wiersz z 3 po lewej i kolumną z prawej (1 + YEARS) */
.big-row{
    display:flex;
    align-items:flex-start; /* top-aligned -> 1 będzie wyżej */
    gap: 8px;
}

.three{
    color: #e03e2d;
    font-size: calc(var(--badge-width) * 0.48); /* bardzo duże */
    line-height: 0.9;
    font-weight: 900;
    display:block;
    margin: 0;
    z-index:999;
}

.right-col{
    display:flex;
    flex-direction:column;
    align-items:flex-start; /* left-align 1 i paska */
    /* lekko przesunięcie w lewo, żeby 1 podchodziło bliżej 3 */
    margin-left: calc(var(--badge-width) * -0.06);
}

.one{
    color: #e03e2d;
    font-size: calc(var(--badge-width) * 0.30);
    font-weight: 900;
    line-height: 1;
    margin: 0;
    /* ustaw wyżej niż środek trójki — dopasuj translateY jeśli chcesz inne położenie */
    transform: translateY(2%) translateX(-30%);
}
.years-strip {
    position: relative;
    /*background: var(--ribbon-bg);*/
    color: var(--ribbon-text);
    font-weight: 800;
    text-transform: uppercase;
    padding: 3px 5px 3px 0px;
    margin-top: -4px;
    font-size: calc(var(--badge-width) * 0.11);
    border-radius: 0; /* bez zaokrąglenia */
    white-space: nowrap;

    overflow: hidden; /* żeby pseudo-element się dobrze przyciął */
}

/* pseudo-element wycina wklęsłe zawinięcie z lewej */




/* IN BUSINESS */
.in-business{
    font-weight: 900;
    text-transform: uppercase;
    font-size: calc(var(--badge-width) * 0.11);
    letter-spacing: 0.02em;
}

/* responsywność prosta */
@media (max-width:420px){
    :root{ --badge-width: 80px; }
    .badge{
        margin-left: -15px;
    }
}
@media (max-width:320px){
    :root{ --badge-width: 80px; }
    .badge{
        margin-left: -15px;
    }
}