// | variable      | size  | calculation     |
// |---------------|-------|-----------------|
// | $spacing--xxs |  5px  | $baseline * 0.5 |
// | $spacing--xs  | 10px  | $baseline * 1   |
// | $spacing--s   | 20px  | $baseline * 2   |
// | $spacing--m   | 30px  | $baseline * 3   |
// | $spacing--l   | 50px  | $baseline * 5   |
// | $spacing--xl  | 80px  | $baseline * 8   |
// | $spacing--xxl | 130px | $baseline * 13  |

$spacing--xxs: $baseline * 0.5;
$spacing--xs: $baseline * 1;
$spacing--s: $baseline * 2;
$spacing--m: $baseline * 3;
$spacing--l: $baseline * 5;
$spacing--xl: $baseline * 8;
$spacing--xxl: $baseline * 13;

// grid spacings
$grid-margin--s: 25px;
$grid-margin--m: 50px;
$grid-margin--l: 100px;