:root {
  
  /* BREAKPOINTS */

  --bp-1: 400px;
  --bp-2: 700px;
  --bp-3: 1000px;
  --bp-4: 1400px;

  
  /* TYPOGRAPHY */

  /* Large text */
  --font-lg--bp-1: 2.2rem;
  --font-lg--bp-2: 3rem;
  --font-lg--bp-3: 3.4rem;
  --font-lg--bp-4: 4.2rem;
  
  /* Small text */
  --font-sm--bp-1: 1.6rem;
  --font-sm--bp-2: 1.6rem;
  --font-sm--bp-3: 1.8rem;
  --font-sm--bp-4: 2rem;


  /* SPACING */

  /* Top padding on main */
  --space-xl--bp-1: 12rem;
  --space-xl--bp-2: 9.5rem;
  --space-xl--bp-3: 10rem;
  --space-xl--bp-4: 11rem;

  /* Padding above and below slide images */
  --space-lg--bp-1: 4rem;
  --space-lg--bp-2: 5rem;
  --space-lg--bp-3: 5rem;
  --space-lg--bp-4: 5rem;

  /* Horizontal margin and nav-item padding */
  --space-md--bp-1: 2.4rem;
  --space-md--bp-2: 3rem;
  --space-md--bp-3: 4rem;
  --space-md--bp-4: 4rem;

  /* Grid gutter */
  --space-sm--bp-1: 1.6rem;
  --space-sm--bp-2: 2.6rem;
  --space-sm--bp-3: 3rem;
  --space-sm--bp-4: 3.5rem;

  /* Top margin on nav */
  --space-xs--bp-1: 1rem;
  --space-xs--bp-2: 2rem;
  --space-xs--bp-3: 2rem;
  --space-xs--bp-4: 2rem;
}