/**
 *
 * 8-Point Grid
 * https://medium.com/built-to-adapt/intro-to-the-8-point-grid-system-d2573cde8632
 *
 * It's fine that not every instance of `px` sizing doesn't fit this, however by
 * providing a grid, we can create a preferred pattern. Anything else, can be treated
 * as a `one-off`.
 */
:root {
  --grid-1xs: 4px;
  --grid-1x: 8px;
  --grid-2xs: 12px;
  --grid-2x: 16px;
  --grid-3xs: 20px;
  --grid-3x: 24px;
  --grid-4xs: 28px;
  --grid-4x: 32px;
  --grid-5xs: 36px;
  --grid-5x: 40px;
  --grid-6xs: 44px;
  --grid-6x: 48px;
  --grid-7xs: 52px;
  --grid-7x: 56px;
  --grid-8xs: 60px;
  --grid-8x: 64px;
  --grid-9xs: 68px;
  --grid-9x: 72px;
  --grid-10xs: 76px;
  --grid-10x: 80px;
}