:root {
    --mar-240: 240px;
    --mar-140: 140px;
    --mar-120: 120px;
    --mar-100: 100px;
    --mar-80: 80px;
    --mar-64: 64px;
    --mar-60: 60px;
    --mar-52: 52px;
    --mar-45: 45px;
    --mar-32: 32px;
    --mar-s: 24px;
    --mar-s-s: 12px;
    --mar-r-124: -124px;
    --mar-r-120: -120px;
    --mar-r-240: -240px;
}

@media (max-width: 768px) {
    :root {
        --mar-240: calc(240px / 2);
        --mar-140: calc(140px / 2.15);
        --mar-120: calc(120px / 2);
        --mar-100: calc(100px / 2);
        --mar-80: calc(80px / 2);
        --mar-60: calc(60px / 2);
        --mar-52: calc(52px / 2);
        --mar-45: calc(45px / 2);
        --mar-32: calc(32px / 1.5);
        --mar-s: calc(24px / 1.5);
        /* --mar-s-s: calc(12px / 2); */
        --mar-r-124: 0px;
        --mar-r-120: 0px;
        --mar-r-240: -60px;
    }
}