:root {
  --color-black: #222224;
  --color-lightest-black: #626264;
  --color-dark-grey: #888888;
  --color-grey : #c4c4c4;
  --color-light-grey: #f5f5f5;
  --color-white: white;
  --color-primary: #2075FF;
  --color-lightest-primary: #F7F9FF;
  --color-darkest-primary: #16076F;
  --font-family-primary: 'Rubik', sans-serif;
  --initial-font-size: 1.5rem;
  --gap: 1em;
  --total-gap: calc( var(--gap) * 3 );
  --each-gutter: calc(var(--total-gap) / 4);
  --inbox-template-columns: calc(15% - var(--each-gutter)) calc(30% - var(--each-gutter)) calc(45% - var(--each-gutter)) calc(10% - var(--each-gutter));
}

$breakpoints: (
  'xxxlg': 125em, //2000
  'xxlg': 90em, //1440,
  'xlg': 75em, //1200,
  'lg': 62em, //992
  'md': 48em, //768,
  'sm': 32em, //512,
  'xsm': 22.5em, //320,
  'xxsm': 17.5em, //280
  'xxxsm' : 10.625em // 170
);