: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-44: 44px;
    --mar-40: 40px;
    --mar-36: 36px;
    --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-64: calc(64px / 2);
        --mar-60: calc(60px / 2);
        --mar-52: calc(52px / 2);
        --mar-44: calc(44px / 2);
        --mar-40: calc(40px / 2);
        --mar-36: calc(36px / 1.5);
        --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;
    }
}