Widths

TODOS

• general usage tips (when to use a sass variable vs custom prop)
• Add / comment on semantic properties (vertical-rhythm, gutter) and how to use

Notes

• For setting container widths and for responsive breakpoints
• REMS used for length unit

// These values are unit agnostic, so they can be used as ems or rems.
$widths: (
  'width-20': 20, //320px
  'width-30': 30, //480px
  'width-40': 40, //640px
  'width-48': 48, //768px
  'width-64': 64, //1024px
  'width-75': 75, //1200px
  'width-80': 80, //1280px
  'width-90': 90 //1440px
);

$global-widths : (
  'width-default' : var(--width-75)
)