/* ----------CAR MINI------------------ */

.car {
    --car-row: 0;
    --car-col: 0;
    --car-mini-w: 38px;
    --car-mini-h: 15px;
    --car-mini-offset-y: -90px;
    --car-mini-offset-x: 0px;
    --car-mini-tex: url('img/TX1802_SMALL.png');
    width: var(--car-mini-w);
    height: var(--car-mini-h);
    background-image: var(--car-mini-tex);
    background-position-x: calc(var(--car-mini-offset-x) - var(--car-col) * var(--car-mini-w));
    background-position-y: calc(var(--car-mini-offset-y) - var(--car-row) * var(--car-mini-h));
}

    .car[data-car-id="0"] {
        --car-row: 0;
        --car-col: 0;
    }

    .car[data-car-id="1"] {
        --car-row: 1;
        --car-col: 0;
    }

    .car[data-car-id="2"] {
        --car-row: 2;
        --car-col: 0;
    }

    .car[data-car-id="3"] {
        --car-row: 3;
        --car-col: 0;
    }

    .car[data-car-id="4"] {
        --car-row: 4;
        --car-col: 0;
    }

    .car[data-car-id="5"] {
        --car-row: 5;
        --car-col: 0;
    }

    .car[data-car-id="6"] {
        --car-row: 6;
        --car-col: 0;
    }

    .car[data-car-id="7"] {
        --car-row: 7;
        --car-col: 0;
    }

    .car[data-car-id="8"] {
        --car-row: 8;
        --car-col: 0;
    }

    .car[data-car-id="9"] {
        --car-row: 9;
        --car-col: 0;
    }

    .car[data-car-id="10"] {
        --car-row: 10;
        --car-col: 0;
    }

    .car[data-car-id="11"] {
        --car-row: 0;
        --car-col: 1;
    }

    .car[data-car-id="12"] {
        --car-row: 1;
        --car-col: 1;
    }

    .car[data-car-id="13"] {
        --car-row: 2;
        --car-col: 1;
    }

    .car[data-car-id="14"] {
        --car-row: 3;
        --car-col: 1;
    }

    .car[data-car-id="15"] {
        --car-row: 4;
        --car-col: 1;
    }

    .car[data-car-id="16"] {
        --car-row: 5;
        --car-col: 1;
    }

    .car[data-car-id="17"] {
        --car-row: 6;
        --car-col: 1;
    }

    .car[data-car-id="18"] {
        --car-row: 7;
        --car-col: 1;
    }

    .car[data-car-id="19"] {
        --car-row: 8;
        --car-col: 1;
    }

    .car[data-car-id="20"] {
        --car-row: 9;
        --car-col: 1;
    }

    .car[data-car-id="21"] {
        --car-row: 10;
        --car-col: 1;
    }

    .car[data-car-id="22"] {
        --car-row: 1;
        --car-col: 2;
    }


/* ----------CAR BIG------------------ */

.car-big {
    --car-row: 0;
    --car-col: 0;
    --car-maxi-w: 83px;
    --car-maxi-h: 42px;
    --car-maxi-tex: url('img/TX1822_SMALL.png');
    --car-maxi-tex2: url('img/TX1824_SMALL.png');
    width: var(--car-maxi-w);
    height: var(--car-maxi-h);
    background-position-x: calc(-1 * var(--car-col) * var(--car-maxi-w));
    background-position-y: calc(-1 * var(--car-row) * var(--car-maxi-h));
}

    .car-big[data-car-id="0"] {
        background-image: var(--car-maxi-tex);
        --car-row: 0;
        --car-col: 0;
    }

    .car-big[data-car-id="1"] {
        background-image: var(--car-maxi-tex);
        --car-row: 0;
        --car-col: 1;
    }

    .car-big[data-car-id="2"] {
        background-image: var(--car-maxi-tex);
        --car-row: 0;
        --car-col: 2;
    }

    .car-big[data-car-id="3"] {
        background-image: var(--car-maxi-tex);
        --car-row: 1;
        --car-col: 0;
    }

    .car-big[data-car-id="4"] {
        background-image: var(--car-maxi-tex);
        --car-row: 1;
        --car-col: 1;
    }

    .car-big[data-car-id="5"] {
        background-image: var(--car-maxi-tex);
        --car-row: 1;
        --car-col: 2;
    }

    .car-big[data-car-id="6"] {
        background-image: var(--car-maxi-tex);
        --car-row: 2;
        --car-col: 0;
    }

    .car-big[data-car-id="7"] {
        background-image: var(--car-maxi-tex);
        --car-row: 2;
        --car-col: 1;
    }

    .car-big[data-car-id="8"] {
        background-image: var(--car-maxi-tex);
        --car-row: 2;
        --car-col: 2;
    }

    .car-big[data-car-id="9"] {
        background-image: var(--car-maxi-tex);
        --car-row: 3;
        --car-col: 0;
    }

    .car-big[data-car-id="10"] {
        background-image: var(--car-maxi-tex);
        --car-row: 3;
        --car-col: 1;
    }

    .car-big[data-car-id="11"] {
        background-image: var(--car-maxi-tex);
        --car-row: 3;
        --car-col: 2;
    }

    .car-big[data-car-id="12"] {
        background-image: var(--car-maxi-tex);
        --car-row: 4;
        --car-col: 0;
    }

    .car-big[data-car-id="13"] {
        background-image: var(--car-maxi-tex);
        --car-row: 4;
        --car-col: 1;
    }

    .car-big[data-car-id="14"] {
        background-image: var(--car-maxi-tex);
        --car-row: 4;
        --car-col: 2;
    }

    .car-big[data-car-id="15"] {
        background-image: var(--car-maxi-tex);
        --car-row: 5;
        --car-col: 0;
    }

    .car-big[data-car-id="16"] {
        background-image: var(--car-maxi-tex);
        --car-row: 5;
        --car-col: 1;
    }

    .car-big[data-car-id="17"] {
        background-image: var(--car-maxi-tex);
        --car-row: 5;
        --car-col: 2;
    }

    .car-big[data-car-id="18"] {
        background-image: var(--car-maxi-tex2);
        --car-row: 0;
        --car-col: 0;
    }

    .car-big[data-car-id="19"] {
        background-image: var(--car-maxi-tex2);
        --car-row: 0;
        --car-col: 1;
    }

    .car-big[data-car-id="20"] {
        background-image: var(--car-maxi-tex2);
        --car-row: 0;
        --car-col: 2;
    }

    .car-big[data-car-id="21"] {
        background-image: var(--car-maxi-tex2);
        --car-row: 1;
        --car-col: 0;
    }

    .car-big[data-car-id="22"] {
        background-image: var(--car-maxi-tex2);
        --car-row: 1;
        --car-col: 1;
    }