:root {
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-8: 2rem; /* 32px */
  --spacing-10: 2.5rem; /* 40px */
  --spacing-12: 3rem; /* 48px */
  --spacing-16: 4rem; /* 64px */
  --spacing-20: 5rem; /* 80px */
  --spacing-24: 6rem; /* 96px */
  --spacing-32: 8rem; /* 128px */
  --spacing-40: 10rem; /* 160px */
  --spacing-48: 12rem; /* 192px */
  --spacing-56: 14rem; /* 224px */
  --spacing-64: 16rem; /* 256px */
}

:root {
  --container-sm: 40rem; /* 640px */
  --container-md: 48rem; /* 768px */
  --container-lg: 64rem; /* 1024px */
  --container-xl: 80rem; /* 1280px */
}


:root {
  /* Viewports */
  --grid-desktop-width: 80rem; /* 1280px */
  --grid-tablet-width: 48rem; /* 768px */
  --grid-mobile-width: 23.4375rem; /* 375px */

  /* Content Width */
  --grid-desktop-content: 76rem; /* 1216px */
  --grid-tablet-content: 44rem; /* 704px */
  --grid-mobile-content: 21.4375rem; /* 343px */

  /* Gutters */
  --grid-desktop-gutter: 2rem; /* 32px */
  --grid-tablet-gutter: 2rem; /* 32px */
  --grid-mobile-gutter: 1rem; /* 16px */

  /* Columns */
  --grid-columns-desktop: 12;
  --grid-columns-tablet: 6;
  --grid-columns-mobile: 5;

  /* Container Grid Layouts */
  --container-grid-12: repeat(12, minmax(0, 1fr));
  --container-grid-6: repeat(6, minmax(0, 1fr));
  --container-grid-5: repeat(5, minmax(0, 1fr));
  --container-grid-3: repeat(3, minmax(0, 1fr));
  --container-grid-2: repeat(2, minmax(0, 1fr));
}