:root {
    --static-space-0:   0;
    --static-space-1:   1px;
    --static-space-2:   0.125rem;
    --static-space-4:   0.25rem;
    --static-space-8:   0.5rem;
    --static-space-12:  0.75rem;
    --static-space-16:  1rem;
    --static-space-20:  1.25rem;
    --static-space-24:  1.5rem;
    --static-space-32:  2rem;
    --static-space-40:  2.5rem;
    --static-space-48:  3rem;
    --static-space-56:  3.5rem;
    --static-space-64:  4rem;
    --static-space-80:  5rem;
    --static-space-104: 6.5rem;
    --static-space-128: 8rem;
    --static-space-160: 10rem;

    --static-width-2400: 150rem;
    --static-width-1600: 100rem;
    --static-width-1440: 90rem;
    --static-width-1200: 75rem;
    --static-width-1024: 64rem;
    --static-width-880:  55rem;
    --static-width-768:  48rem;
    --static-width-640:  40rem;
    --static-width-560:  35rem;
    --static-width-400:  25rem;
    --static-width-320:  20rem;

    --static-height-560: 35rem;
    --static-height-480: 30rem;
    --static-height-400: 25rem;
    --static-height-360: 22.5rem;
    --static-height-320: 20rem;
    --static-height-280: 17.5rem;
    --static-height-240: 15rem;
    --static-height-220: 13.75rem;
    --static-height-160: 10rem;

    --responsive-width-xl: var(--static-width-1440);
    --responsive-width-l:  var(--static-width-1200);
    --responsive-width-m:  var(--static-width-1024);
    --responsive-width-s:  var(--static-width-768);
    --responsive-width-xs: var(--static-width-640);

    --responsive-height-xl: var(--static-height-560);
    --responsive-height-l:  var(--static-height-480);
    --responsive-height-m:  var(--static-height-400);
    --responsive-height-s:  var(--static-height-360);
    --responsive-height-xs: var(--static-height-280);

    --responsive-space-xl: var(--static-space-80);
    --responsive-space-l:  var(--static-space-40);
    --responsive-space-m:  var(--static-space-24);
    --responsive-space-s:  var(--static-space-16);
    --responsive-space-xs: var(--static-space-12);
}

@media (--m) {
    :root {
        --responsive-width-xl: var(--static-width-1024);
        --responsive-width-l:  var(--static-width-1024);
        --responsive-width-m:  var(--static-width-880);
        --responsive-width-s:  var(--static-width-768);
        --responsive-width-xs: var(--static-width-640);

        --responsive-height-xl: var(--static-height-480);
        --responsive-height-l:  var(--static-height-400);
        --responsive-height-m:  var(--static-height-360);
        --responsive-height-s:  var(--static-height-280);
        --responsive-height-xs: var(--static-height-240);

        --responsive-space-xl: var(--static-space-64);
        --responsive-space-l:  var(--static-space-24);
        --responsive-space-m:  var(--static-space-16);
        --responsive-space-s:  var(--static-space-12);
        --responsive-space-xs: var(--static-space-8);
    }
}

@media (--s) {
    :root {
        --responsive-width-xl: var(--static-width-1024);
        --responsive-width-l:  var(--static-width-1024);
        --responsive-width-m:  var(--static-width-880);
        --responsive-width-s:  var(--static-width-768);
        --responsive-width-xs: var(--static-width-640);

        --responsive-height-xl: var(--static-height-320);
        --responsive-height-l:  var(--static-height-280);
        --responsive-height-m:  var(--static-height-240);
        --responsive-height-s:  var(--static-height-220);
        --responsive-height-xs: var(--static-height-160);

        --responsive-space-xl: var(--static-space-40);
        --responsive-space-l:  var(--static-space-16);
        --responsive-space-m:  var(--static-space-12);
        --responsive-space-s:  var(--static-space-8);
        --responsive-space-xs: var(--static-space-4);
    }
}

[data-scaling="110"] {
    --static-space-1:   calc(0.0625rem * 1.1);
    --static-space-2:   calc(0.125rem * 1.1);
    --static-space-4:   calc(0.25rem * 1.1);
    --static-space-8:   calc(0.5rem * 1.1);
    --static-space-12:  calc(0.75rem * 1.1);
    --static-space-16:  calc(1rem * 1.1);
    --static-space-20:  calc(1.25rem * 1.1);
    --static-space-24:  calc(1.5rem * 1.1);
    --static-space-32:  calc(2rem * 1.1);
    --static-space-40:  calc(2.5rem * 1.1);
    --static-space-48:  calc(3rem * 1.1);
    --static-space-56:  calc(3.5rem * 1.1);
    --static-space-64:  calc(4rem * 1.1);
    --static-space-80:  calc(5rem * 1.1);
    --static-space-104: calc(6.5rem * 1.1);
    --static-space-128: calc(8rem * 1.1);
    --static-space-160: calc(10rem * 1.1);

    --static-width-2400: calc(150rem * 1.1);
    --static-width-1600: calc(100rem * 1.1);
    --static-width-1440: calc(90rem * 1.1);
    --static-width-1200: calc(75rem * 1.1);
    --static-width-1024: calc(64rem * 1.1);
    --static-width-880:  calc(55rem * 1.1);
    --static-width-768:  calc(48rem * 1.1);
    --static-width-560:  calc(35rem * 1.1);
    --static-width-400:  calc(25rem * 1.1);
    --static-width-320:  calc(20rem * 1.1);

    --static-height-560: calc(35rem * 1.1);
    --static-height-480: calc(30rem * 1.1);
    --static-height-400: calc(25rem * 1.1);
    --static-height-360: calc(22.5rem * 1.1);
    --static-height-320: calc(20rem * 1.1);
    --static-height-280: calc(17.5rem * 1.1);
    --static-height-240: calc(15rem * 1.1);
    --static-height-220: calc(13.75rem * 1.1);
    --static-height-160: calc(10rem * 1.1);
}

[data-scaling="105"] {
    --static-space-1:   calc(0.0625rem * 1.05);
    --static-space-2:   calc(0.125rem * 1.05);
    --static-space-4:   calc(0.25rem * 1.05);
    --static-space-8:   calc(0.5rem * 1.05);
    --static-space-12:  calc(0.75rem * 1.05);
    --static-space-16:  calc(1rem * 1.05);
    --static-space-20:  calc(1.25rem * 1.05);
    --static-space-24:  calc(1.5rem * 1.05);
    --static-space-32:  calc(2rem * 1.05);
    --static-space-40:  calc(2.5rem * 1.05);
    --static-space-48:  calc(3rem * 1.05);
    --static-space-56:  calc(3.5rem * 1.05);
    --static-space-64:  calc(4rem * 1.05);
    --static-space-80:  calc(5rem * 1.05);
    --static-space-104: calc(6.5rem * 1.05);
    --static-space-128: calc(8rem * 1.05);
    --static-space-160: calc(10rem * 1.05);

    --static-width-2400: calc(150rem * 1.05);
    --static-width-1600: calc(100rem * 1.05);
    --static-width-1440: calc(90rem * 1.05);
    --static-width-1200: calc(75rem * 1.05);
    --static-width-1024: calc(64rem * 1.05);
    --static-width-880:  calc(55rem * 1.05);
    --static-width-768:  calc(48rem * 1.05);
    --static-width-560:  calc(35rem * 1.05);
    --static-width-400:  calc(25rem * 1.05);
    --static-width-320:  calc(20rem * 1.05);

    --static-height-560: calc(35rem * 1.05);
    --static-height-480: calc(30rem * 1.05);
    --static-height-400: calc(25rem * 1.05);
    --static-height-360: calc(22.5rem * 1.05);
    --static-height-320: calc(20rem * 1.05);
    --static-height-280: calc(17.5rem * 1.05);
    --static-height-240: calc(15rem * 1.05);
    --static-height-220: calc(13.75rem * 1.05);
    --static-height-160: calc(10rem * 1.05);
}

[data-scaling="95"] {
    --static-space-1:   calc(0.0625rem * 0.95);
    --static-space-2:   calc(0.125rem * 0.95);
    --static-space-4:   calc(0.25rem * 0.95);
    --static-space-8:   calc(0.5rem * 0.95);
    --static-space-12:  calc(0.75rem * 0.95);
    --static-space-16:  calc(1rem * 0.95);
    --static-space-20:  calc(1.25rem * 0.95);
    --static-space-24:  calc(1.5rem * 0.95);
    --static-space-32:  calc(2rem * 0.95);
    --static-space-40:  calc(2.5rem * 0.95);
    --static-space-48:  calc(3rem * 0.95);
    --static-space-56:  calc(3.5rem * 0.95);
    --static-space-64:  calc(4rem * 0.95);
    --static-space-80:  calc(5rem * 0.95);
    --static-space-104: calc(6.5rem * 0.95);
    --static-space-128: calc(8rem * 0.95);
    --static-space-160: calc(10rem * 0.95);

    --static-width-2400: calc(150rem * 0.95);
    --static-width-1600: calc(100rem * 0.95);
    --static-width-1440: calc(90rem * 0.95);
    --static-width-1200: calc(75rem * 0.95);
    --static-width-1024: calc(64rem * 0.95);
    --static-width-880:  calc(55rem * 0.95);
    --static-width-768:  calc(48rem * 0.95);
    --static-width-560:  calc(35rem * 0.95);
    --static-width-400:  calc(25rem * 0.95);
    --static-width-320:  calc(20rem * 0.95);

    --static-height-560: calc(35rem * 0.95);
    --static-height-480: calc(30rem * 0.95);
    --static-height-400: calc(25rem * 0.95);
    --static-height-360: calc(22.5rem * 0.95);
    --static-height-320: calc(20rem * 0.95);
    --static-height-280: calc(17.5rem * 0.95);
    --static-height-240: calc(15rem * 0.95);
    --static-height-220: calc(13.75rem * 0.95);
    --static-height-160: calc(10rem * 0.95);
}

[data-scaling="90"] {
    --static-space-1:   calc(0.0625rem * 0.9);
    --static-space-2:   calc(0.125rem * 0.9);
    --static-space-4:   calc(0.25rem * 0.9);
    --static-space-8:   calc(0.5rem * 0.9);
    --static-space-12:  calc(0.75rem * 0.9);
    --static-space-16:  calc(1rem * 0.9);
    --static-space-20:  calc(1.25rem * 0.9);
    --static-space-24:  calc(1.5rem * 0.9);
    --static-space-32:  calc(2rem * 0.9);
    --static-space-40:  calc(2.5rem * 0.9);
    --static-space-48:  calc(3rem * 0.9);
    --static-space-56:  calc(3.5rem * 0.9);
    --static-space-64:  calc(4rem * 0.9);
    --static-space-80:  calc(5rem * 0.9);
    --static-space-104: calc(6.5rem * 0.9);
    --static-space-128: calc(8rem * 0.9);
    --static-space-160: calc(10rem * 0.9);

    --static-width-2400: calc(150rem * 0.9);
    --static-width-1600: calc(100rem * 0.9);
    --static-width-1440: calc(90rem * 0.9);
    --static-width-1200: calc(75rem * 0.9);
    --static-width-1024: calc(64rem * 0.9);
    --static-width-880:  calc(55rem * 0.9);
    --static-width-768:  calc(48rem * 0.9);
    --static-width-560:  calc(35rem * 0.9);
    --static-width-400:  calc(25rem * 0.9);
    --static-width-320:  calc(20rem * 0.9);

    --static-height-560: calc(35rem * 0.9);
    --static-height-480: calc(30rem * 0.9);
    --static-height-400: calc(25rem * 0.9);
    --static-height-360: calc(22.5rem * 0.9);
    --static-height-320: calc(20rem * 0.9);
    --static-height-280: calc(17.5rem * 0.9);
    --static-height-240: calc(15rem * 0.9);
    --static-height-220: calc(13.75rem * 0.9);
    --static-height-160: calc(10rem * 0.9);
}