:root {

    --base: 8;
    --ratio: 3;
    --col: 100vw / 12;
    --inner-grid-w: calc(144rem + (var(--spacing) * 11));

    /* Line height */
    --line-height-s-ul-px: calc(var(--base) * 3); /* 24 px */
    --line-height-m-ul-px: calc(var(--base) * 3); /* 24 px */
    --line-height-l-ul-px: calc(var(--base) * 4); /* 32 px */
    --line-height-xl-ul-px: calc(var(--base) * 5); /* 40 px */
    --line-height-2xl-ul-px: calc(var(--base) * 8); /* 64 px*/
    --line-height-3xl-ul-px: calc(var(--base) * 10); /* 80 px */
    --line-height-4xl-ul-px: calc(var(--base) * 11); /* 88 px */
    --line-height-5xl-ul-px: calc(var(--base) * 21); /* 168 px*/

    /* Font size */
    --font-size-xs-ul-px: 12;
    --font-size-s-ul-px: 18;
    --font-size-m-ul-px: 22;
    --font-size-l-ul-px: 28;
    --font-size-xl-ul-px: 36;
    --font-size-2xl-ul-px: 60;
    --font-size-3xl-ul-px: 70;
    --font-size-4xl-ul-px: 80;
    --font-size-5xl-ul-px: 154;

    /* Font Stack */
    --font-main: 'Public Sans', sans-serif;
    --font-title: 'Public Sans', sans-serif;
    --font-alt: 'Public Sans', 'Arial', sans-serif;
    --font-icon: 'FontAwesome';

    --font-weight-thin: 100;
    --font-weight-extra-light: 200;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 800;
    --font-weight-black: 900;

    --font-style-regular: normal;
    --font-style-italic: italic;
    --font-style-oblic: oblique;

    --stack-heading-l: var(--font-style-regular) var(--font-weight-extra-bold) var(--font-size-3xl)/var(--line-height-3xl) var(--font-title);
    --stack-heading-m: var(--font-style-regular) var(--font-weight-extra-bold) var(--font-size-xl)/var(--line-height-xl) var(--font-title);
    --stack-heading-s: var(--font-style-regular) var(--font-weight-medium) var(--font-size-m)/var(--line-height-m) var(--font-title);

    --stack-content-l: var(--font-style-regular) var(--font-weight-medium) var(--font-size-l)/var(--line-height-l) var(--font-main);
    --stack-content-m: var(--font-style-regular) var(--font-weight-regular) var(--font-size-s)/var(--line-height-s) var(--font-main);
    --stack-content-s: var(--font-style-regular) var(--font-weight-medium) var(--font-size-xs)/var(--line-height-xs) var(--font-main);

    --stack-menu-l: var(--font-style-regular) var(--font-weight-bold) var(--font-size-l)/var(--line-height-m) var(--font-alt);
    --stack-menu-m: var(--font-style-regular) var(--font-weight-bold) var(--font-size-m)/var(--line-height-m) var(--font-alt);
    --stack-menu-s: var(--font-style-regular) var(--font-weight-bold) var(--font-size-s)/var(--line-height-m) var(--font-alt);

    --stack-icn: var(--font-style-regular) var(--font-weight-regular) 1em/1 var(--font-icon);

    /* Paddings and margins */

    --padding-s: 10px;
    --padding-m: 20px;
    --padding-l: 25px;
    --padding-xl: 50px;
    --padding-2xl: 100px;
    --padding-3xl: 150px;
    --padding-4xl: 250px;

    --margin-s: 10px;
    --margin-m: 20px;
    --margin-l: 25px;
    --margin-xl: 50px;
    --margin-2xl: 100px;
    --margin-3xl: 150px;
    --margin-4xl: 250px;

    /* Offset */

    --slide: 0;
    --offset: 0px;

    /* COLORS */
    --color-1: hsla(214, 64%, 22%, 1); /* #14325A */
    --color-2: hsla(193, 84%, 53%, 1); /* #21BFEB */
    --color-3: hsla(21, 100%, 60%, 1); /* #FF7832 */
    --color-4: hsla(216, 14%, 86%, 1); /* #D6DAE0 */
    --color-5: hsla(18, 100%, 89%, 1); /* #FFD8C7 */

    /* Basic colors and tones */
    --color-black: #000000;
    --color-gray: #EAECEF;
    --color-white: #FFFFFF;
    
    /* Transitions */
    --transition-default: all .6s ease;
}

@media screen and (max-width: 1024px) {
    :root {
      --font-size-2xl-ul-px 		: 42;
      --font-size-3xl-ul-px 		: 60;
      --font-size-4xl-ul-px 		: 70;
      --font-size-5xl-ul-px		    : 90;

      --line-height-2xl-ul-px       : calc(var(--base) * 6); /* 48 px*/
      --line-height-3xl-ul-px       : calc(var(--base) * 8); /* 64 px */
      --line-height-4xl-ul-px       : calc(var(--base) * 9); /* 72 px */
      --line-height-5xl-ul-px 	    : calc(var(--base) * 12);	/* 96 px*/

      --margin-3xl				    : 100px;
      --margin-4xl				    : 100px;

      --padding-3xl				    : 100px;
      --padding-4xl				    : 100px;
    }
}

@media screen and (max-width: 500px) {
    :root {
    --font-size-l-ul-px             : 24;
      --font-size-xl-ul-px 		    : 32;
      --font-size-2xl-ul-px 		: 36;
      --font-size-3xl-ul-px 		: 42;
      --font-size-4xl-ul-px 		: 60;
      --font-size-5xl-ul-px		    : 70;
      
      --line-height-l-ul-px         : calc(var(--base) * 3); /* 24 px */
      --line-height-xl-ul-px        : calc(var(--base) * 4); /* 32 px */
      --line-height-2xl-ul-px       : calc(var(--base) * 5); /* 40 px*/
      --line-height-3xl-ul-px       : calc(var(--base) * 6); /* 48 px */
      --line-height-4xl-ul-px       : calc(var(--base) * 8); /* 64 px */
      --line-height-5xl-ul-px 	    : calc(var(--base) * 9); /* 72 px*/
    
      --margin-2xl				    : 80px;
      --margin-3xl				    : 80px;
      --margin-4xl				    : 80px;
    
      --padding-2xl				    : 80px;
      --padding-3xl				    : 80px;
      --padding-4xl				    : 80px;
    }
}