:root{
    
    /* Screens */
    --iu-screens-sm: 40rem; /* 640px */
    --iu-screens-md: 48rem; /* 768px */
    --iu-screens-lg: 62rem; /* 992px */
    --iu-screens-xl: 80rem; /* 1280px */
    --iu-screens-2xl: 120rem; /* 1920px */
    --iu-screens-3xl: 128rem; /* 2048px */
    
    /* Grid */
    --iu-grid-offset: 0;
    @media (--md){
        --iu-grid-offset: 7.5rem; /* 120px */
    }
    @media (--2xl){
        --iu-grid-offset: max(7.5rem, calc((100vw - var(--iu-screens-2xl))/2));
    }
    --iu-grid-gutter: .9375rem; /* 15px */
    @media (--xl){
        --iu-grid-gutter: 1.25rem; /* 20px */
    }

    /** Font Family */
    --iu-font-sans: Standard, sans-serif;
    
    /** Colors */
    --iu-color-white: #fff;
    --iu-color-grey-100: #F2F5F5;
    --iu-color-grey-200: #D3D8D8;
    --iu-color-grey-300: #6E7878;
    --iu-color-grey-400: #8D9797;
    --iu-color-grey-500: #535A5A;
    --iu-color-black: #000;
    --iu-color-yellow-100: #FFCC00;
    --iu-color-yellow-200: #E5B700;
    --iu-color-yellow-300: #9E7F00;
    --iu-color-yellow-400: #6E5800;
    --iu-color-blue: #0066FF;

    /** Font sizes */
    /* sm */
    --iu-fs-0: 13px;
    --iu-lh-0: 20px;
    --iu-f-0: var(--iu-fs-0)/var(--iu-lh-0) var(--iu-font-sans);
    /* base */
    --iu-fs-1: 16px;
    --iu-lh-1: 25px;
    --iu-f-1: var(--iu-fs-1)/var(--iu-lh-1) var(--iu-font-sans);
    /* md */
    --iu-fs-2: 20px;
    --iu-lh-2: 30px;
    --iu-f-2: var(--iu-fs-2)/var(--iu-lh-2) var(--iu-font-sans);
    /* md-lg */
    --iu-fs-3: 26px;
    --iu-lh-3: 35px;
    --iu-f-3: var(--iu-fs-3)/var(--iu-lh-3) var(--iu-font-sans);
    /* lg */
    --iu-fs-4: 30px;
    --iu-lh-4: 40px;
    --iu-f-4: var(--iu-fs-4)/var(--iu-lh-4) var(--iu-font-sans);
    /* xl-md */
    --iu-fs-5: 40px;
    --iu-lh-5: 50px;
    --iu-f-5: var(--iu-fs-5)/var(--iu-lh-5) var(--iu-font-sans);
    /* xl */
    --iu-fs-6: 44px;
    --iu-lh-6: 55px;
    --iu-f-6: var(--iu-fs-6)/var(--iu-lh-6) var(--iu-font-sans);
    /* 2xl-md */
    --iu-fs-7: 54px;
    --iu-lh-7: 65px;
    --iu-f-7: var(--iu-fs-7)/var(--iu-lh-7) var(--iu-font-sans);
    /* 2xl */
    --iu-fs-8: 58px;
    --iu-lh-8: 70px;
    --iu-f-8: var(--iu-fs-8)/var(--iu-lh-8) var(--iu-font-sans);
    /* 3xl */
    --iu-fs-9: 90px;
    --iu-lh-9: 105px;
    --iu-f-9: var(--iu-fs-9)/var(--iu-lh-9) var(--iu-font-sans);
    
    /* Preset */
    /* md-lg */
    --iu-fs-md: var(--iu-fs-2);
    --iu-lh-md: var(--iu-lh-2);
    @media (--md){
        --iu-fs-md: var(--iu-fs-3);
        --iu-lh-md: var(--iu-lh-3);
    }
    --iu-f-md: var(--iu-fs-md)/var(--iu-lh-md) var(--iu-font-sans);

    /* lg */
    --iu-fs-lg: var(--iu-fs-2);
    --iu-lh-lg: var(--iu-lh-2);
    @media (--md){
        --iu-fs-lg: var(--iu-fs-3);
        --iu-lh-lg: var(--iu-lh-3);
    }
    @media (--xl){
        --iu-fs-lg: var(--iu-fs-4);
        --iu-lh-lg: var(--iu-lh-4);
    }
    --iu-f-lg: var(--iu-fs-lg)/var(--iu-lh-lg) var(--iu-font-sans);

    /* xl */
    --iu-fs-xl: var(--iu-fs-4);
    --iu-lh-xl: var(--iu-lh-4);
    @media (--md){
        --iu-fs-xl: var(--iu-fs-5);
        --iu-lh-xl: var(--iu-lh-5);
    }
    @media (--xl){
        --iu-fs-xl: var(--iu-fs-6);
        --iu-lh-xl: var(--iu-lh-6);
    }
    --iu-f-xl: var(--iu-fs-xl)/var(--iu-lh-xl) var(--iu-font-sans);
    
    /* 2xl */
    --iu-fs-2xl: var(--iu-fs-4);
    --iu-lh-2xl: var(--iu-lh-4);
    @media (--md){
        --iu-fs-2xl: var(--iu-fs-7);
        --iu-lh-2xl: var(--iu-lh-7);
    }
    @media (--xl){
        --iu-fs-2xl: var(--iu-fs-8);
        --iu-lh-2xl: var(--iu-lh-8);
    }
    --iu-f-2xl: var(--iu-fs-2xl)/var(--iu-lh-2xl) var(--iu-font-sans);
    
    /* 3xl */
    --iu-fs-3xl: var(--iu-fs-4);
    --iu-lh-3xl: var(--iu-lh-4);
    @media (--md){
        --iu-fs-3xl: var(--iu-fs-7);
        --iu-lh-3xl: var(--iu-lh-7);
    }
    @media (--xl){
        --iu-fs-3xl: var(--iu-fs-9);
        --iu-lh-3xl: var(--iu-lh-9);
    }
    --iu-f-3xl: var(--iu-fs-3xl)/var(--iu-lh-3xl) var(--iu-font-sans);

    /* Spacing */
    --iu-spacing-0: .5rem; /* 8px */
    --iu-spacing-1: .9375rem; /* 15px */
    --iu-spacing-2: 1.125rem; /* 18px */
    --iu-spacing-3: 1.5625rem; /* 25px */
    --iu-spacing-4: 1.875rem; /* 30px */
    --iu-spacing-5: 2.1875rem; /* 35px */
    --iu-spacing-6: 2.5rem; /* 40px */
    --iu-spacing-7: 3.125rem; /* 50px */
    --iu-spacing-8: 3.75rem; /* 60px */
    --iu-spacing-9: 4.5rem; /* 72px */
    --iu-spacing-10: 6.25rem; /* 100px */
    --iu-spacing-11: 7.5rem; /* 120px */

    --iu-spacing-block-xs: var(--iu-spacing-3);

    --iu-spacing-block-sm: var(--iu-spacing-3);
    @media (--md){
        --iu-spacing-block-sm: var(--iu-spacing-6);
    }

    --iu-spacing-block: var(--iu-spacing-6);
    @media (--md){
        --iu-spacing-block: var(--iu-spacing-9);
    }

    --iu-spacing-block-lg: var(--iu-spacing-6);
    @media (--md){
        --iu-spacing-block-lg: var(--iu-spacing-9);
    }
    @media (--xl){
        --iu-spacing-block-lg: var(--iu-spacing-11);
    }

}

@custom-media --md (min-width: 48rem);
@custom-media --lg (min-width: 62rem);
@custom-media --xl (min-width: 80rem);
@custom-media --2xl (min-width: 120rem);
@custom-media --3xl (min-width: 128rem);