:root {
    --static-space-0:   0;
    --static-space-1:   0.0625rem;
    --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);
    }
}