/*
  Contains spacing variables for the layout
*/

// 1 rem = 4px;
// Layout scale
$spacing-layout-8: 2rem; // 8px
$spacing-layout-16: 4rem; // 16px
$spacing-layout-24: 6rem; // 24px
$spacing-layout-32: 8rem; // 32px
$spacing-layout-48: 12rem; // 48px
$spacing-layout-64: 16rem; // 64px
$spacing-layout-72: 18rem; // 72px
$spacing-layout-96: 24rem; // 96px
$spacing-layout-128: 32rem; // 128px
$spacing-layout-160: 40rem; // 160px

// Element scale
$spacing-element-2: 0.5rem; // 2px
$spacing-element-4: 1rem; // 4px
$spacing-element-8: 2rem; // 8px
$spacing-element-12: 3rem; // 12px
$spacing-element-16: 4rem; // 16px
$spacing-element-20: 5rem; // 20px
$spacing-element-24: 6rem; // 24px
$spacing-element-32: 8rem; // 32px
$spacing-element-40: 10rem; // 40px
$spacing-element-48: 12rem;  // 48px

// Screen breakpoints
$screen-s: 80rem; //320px
$screen-md: 164rem; // 672px
$screen-l: 264rem; //1056px
$screen-xl: 328rem; //1312px
$screen-xxl: 396rem; //1584px