/* CSS variables dedicated to layout and spacing. */

:root {

  --width-max-600: 1100px;
  --width-max-700: 1440px;
  --width-max-800: 1600px;

  --mobile-nav-fixed-height: 66px;
  --mobile-nav-footer-height: 6rem;

  --spacing-100: 0.125rem;
  --spacing-200: 0.25rem;
  --spacing-300: 0.375rem;
  --spacing-400: 0.5rem;
  --spacing-500: 0.75rem;
  --spacing-600: 1rem;
  --spacing-700: 1.5rem;
  --spacing-800: 2rem;
  --spacing-900: 3rem;

}



/* Media Queries for variables specific to layout */


@media (min-width: 650px) {

  :root {
    --spacing-100: 0.25rem;
    --spacing-200: 0.375rem;
    --spacing-300: 0.5rem;
    --spacing-400: 0.75rem;
    --spacing-500: 1.125rem;
    --spacing-600: 1.5rem;
    --spacing-700: 2.25rem;
    --spacing-800: 3rem;
    --spacing-900: 4.5rem;
  }

}


@media (min-width: 864px) {

  :root {

    --spacing-paragraph: 0 0 1.5rem 0;

    --spacing-100: 0.25rem;
    --spacing-200: 0.5rem;
    --spacing-300: 0.75rem;
    --spacing-400: 1rem;
    --spacing-500: 1.5rem;
    --spacing-600: 2rem;
    --spacing-700: 3rem;
    --spacing-800: 4rem;
    --spacing-900: 6rem;
  }

}