:root {
  --spacing-none: 0px;
  --spacing-xxs: 1px;
  --spacing-xs: 2px;
  --spacing-sm: 5px;
  --spacing-md: 10px;
  --spacing-lg: 20px;
  --spacing-xl: 30px;
  --spacing-2xl: 60px;
  --spacing-3xl: 90px;
  --spacing-4xl: 100px;
  --spacing-5xl: 125px;
  --spacing-6xl: 150px;
  --spacing-7xl: 175px;
  --spacing-8xl: 200px;
  --spacing-9xl: 225px; 
}

/* Spacing types */
@media all {
  /* Helper: lijst van keys */
  /* none, xxs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl */

  /* padding-h-* */
  .padding-h-none  { padding-left: var(--spacing-none);  padding-right: var(--spacing-none); }
  .padding-h-xxs   { padding-left: var(--spacing-xxs);   padding-right: var(--spacing-xxs); }
  .padding-h-xs    { padding-left: var(--spacing-xs);    padding-right: var(--spacing-xs); }
  .padding-h-sm    { padding-left: var(--spacing-sm);    padding-right: var(--spacing-sm); }
  .padding-h-md    { padding-left: var(--spacing-md);    padding-right: var(--spacing-md); }
  .padding-h-lg    { padding-left: var(--spacing-lg);    padding-right: var(--spacing-lg); }
  .padding-h-xl    { padding-left: var(--spacing-xl);    padding-right: var(--spacing-xl); }
  .padding-h-2xl   { padding-left: var(--spacing-2xl);   padding-right: var(--spacing-2xl); }
  .padding-h-3xl   { padding-left: var(--spacing-3xl);   padding-right: var(--spacing-3xl); }
  .padding-h-4xl   { padding-left: var(--spacing-4xl);   padding-right: var(--spacing-4xl); }
  .padding-h-5xl   { padding-left: var(--spacing-5xl);   padding-right: var(--spacing-5xl); }
  .padding-h-6xl   { padding-left: var(--spacing-6xl);   padding-right: var(--spacing-6xl); }
  .padding-h-7xl   { padding-left: var(--spacing-7xl);   padding-right: var(--spacing-7xl); }
  .padding-h-8xl   { padding-left: var(--spacing-8xl);   padding-right: var(--spacing-8xl); }
  .padding-h-9xl   { padding-left: var(--spacing-9xl);   padding-right: var(--spacing-9xl); }

  /* padding-v-* */
  .padding-v-none  { padding-top: var(--spacing-none);  padding-bottom: var(--spacing-none); }
  .padding-v-xxs   { padding-top: var(--spacing-xxs);   padding-bottom: var(--spacing-xxs); }
  .padding-v-xs    { padding-top: var(--spacing-xs);    padding-bottom: var(--spacing-xs); }
  .padding-v-sm    { padding-top: var(--spacing-sm);    padding-bottom: var(--spacing-sm); }
  .padding-v-md    { padding-top: var(--spacing-md);    padding-bottom: var(--spacing-md); }
  .padding-v-lg    { padding-top: var(--spacing-lg);    padding-bottom: var(--spacing-lg); }
  .padding-v-xl    { padding-top: var(--spacing-xl);    padding-bottom: var(--spacing-xl); }
  .padding-v-2xl   { padding-top: var(--spacing-2xl);   padding-bottom: var(--spacing-2xl); }
  .padding-v-3xl   { padding-top: var(--spacing-3xl);   padding-bottom: var(--spacing-3xl); }
  .padding-v-4xl   { padding-top: var(--spacing-4xl);   padding-bottom: var(--spacing-4xl); }
  .padding-v-5xl   { padding-top: var(--spacing-5xl);   padding-bottom: var(--spacing-5xl); }
  .padding-v-6xl   { padding-top: var(--spacing-6xl);   padding-bottom: var(--spacing-6xl); }
  .padding-v-7xl   { padding-top: var(--spacing-7xl);   padding-bottom: var(--spacing-7xl); }
  .padding-v-8xl   { padding-top: var(--spacing-8xl);   padding-bottom: var(--spacing-8xl); }
  .padding-v-9xl   { padding-top: var(--spacing-9xl);   padding-bottom: var(--spacing-9xl); }

  /* spacer-* (height) */
  .spacer-none  { height: var(--spacing-none); }
  .spacer-xxs   { height: var(--spacing-xxs); }
  .spacer-xs    { height: var(--spacing-xs); }
  .spacer-sm    { height: var(--spacing-sm); }
  .spacer-md    { height: var(--spacing-md); }
  .spacer-lg    { height: var(--spacing-lg); }
  .spacer-xl    { height: var(--spacing-xl); }
  .spacer-2xl   { height: var(--spacing-2xl); }
  .spacer-3xl   { height: var(--spacing-3xl); }
  .spacer-4xl   { height: var(--spacing-4xl); }
  .spacer-5xl   { height: var(--spacing-5xl); }
  .spacer-6xl   { height: var(--spacing-6xl); }
  .spacer-7xl   { height: var(--spacing-7xl); }
  .spacer-8xl   { height: var(--spacing-8xl); }
  .spacer-9xl   { height: var(--spacing-9xl); }

  /* width-* */
  .width-none  { width: var(--spacing-none); }
  .width-xxs   { width: var(--spacing-xxs); }
  .width-xs    { width: var(--spacing-xs); }
  .width-sm    { width: var(--spacing-sm); }
  .width-md    { width: var(--spacing-md); }
  .width-lg    { width: var(--spacing-lg); }
  .width-xl    { width: var(--spacing-xl); }
  .width-2xl   { width: var(--spacing-2xl); }
  .width-3xl   { width: var(--spacing-3xl); }
  .width-4xl   { width: var(--spacing-4xl); }
  .width-5xl   { width: var(--spacing-5xl); }
  .width-6xl   { width: var(--spacing-6xl); }
  .width-7xl   { width: var(--spacing-7xl); }
  .width-8xl   { width: var(--spacing-8xl); }
  .width-9xl   { width: var(--spacing-9xl); }

  /* margin-h-* */
  .margin-h-none  { margin-left: var(--spacing-none); margin-right: var(--spacing-none); }
  .margin-h-xxs   { margin-left: var(--spacing-xxs);  margin-right: var(--spacing-xxs); }
  .margin-h-xs    { margin-left: var(--spacing-xs);   margin-right: var(--spacing-xs); }
  .margin-h-sm    { margin-left: var(--spacing-sm);   margin-right: var(--spacing-sm); }
  .margin-h-md    { margin-left: var(--spacing-md);   margin-right: var(--spacing-md); }
  .margin-h-lg    { margin-left: var(--spacing-lg);   margin-right: var(--spacing-lg); }
  .margin-h-xl    { margin-left: var(--spacing-xl);   margin-right: var(--spacing-xl); }
  .margin-h-2xl   { margin-left: var(--spacing-2xl);  margin-right: var(--spacing-2xl); }
  .margin-h-3xl   { margin-left: var(--spacing-3xl);  margin-right: var(--spacing-3xl); }
  .margin-h-4xl   { margin-left: var(--spacing-4xl);  margin-right: var(--spacing-4xl); }
  .margin-h-5xl   { margin-left: var(--spacing-5xl);  margin-right: var(--spacing-5xl); }
  .margin-h-6xl   { margin-left: var(--spacing-6xl);  margin-right: var(--spacing-6xl); }
  .margin-h-7xl   { margin-left: var(--spacing-7xl);  margin-right: var(--spacing-7xl); }
  .margin-h-8xl   { margin-left: var(--spacing-8xl);  margin-right: var(--spacing-8xl); }
  .margin-h-9xl   { margin-left: var(--spacing-9xl);  margin-right: var(--spacing-9xl); }

  /* margin-v-* */
  .margin-v-none  { margin-top: var(--spacing-none); margin-bottom: var(--spacing-none); }
  .margin-v-xxs   { margin-top: var(--spacing-xxs);  margin-bottom: var(--spacing-xxs); }
  .margin-v-xs    { margin-top: var(--spacing-xs);   margin-bottom: var(--spacing-xs); }
  .margin-v-sm    { margin-top: var(--spacing-sm);   margin-bottom: var(--spacing-sm); }
  .margin-v-md    { margin-top: var(--spacing-md);   margin-bottom: var(--spacing-md); }
  .margin-v-lg    { margin-top: var(--spacing-lg);   margin-bottom: var(--spacing-lg); }
  .margin-v-xl    { margin-top: var(--spacing-xl);   margin-bottom: var(--spacing-xl); }
  .margin-v-2xl   { margin-top: var(--spacing-2xl);  margin-bottom: var(--spacing-2xl); }
  .margin-v-3xl   { margin-top: var(--spacing-3xl);  margin-bottom: var(--spacing-3xl); }
  .margin-v-4xl   { margin-top: var(--spacing-4xl);  margin-bottom: var(--spacing-4xl); }
  .margin-v-5xl   { margin-top: var(--spacing-5xl);  margin-bottom: var(--spacing-5xl); }
  .margin-v-6xl   { margin-top: var(--spacing-6xl);  margin-bottom: var(--spacing-6xl); }
  .margin-v-7xl   { margin-top: var(--spacing-7xl);  margin-bottom: var(--spacing-7xl); }
  .margin-v-8xl   { margin-top: var(--spacing-8xl);  margin-bottom: var(--spacing-8xl); }
  .margin-v-9xl   { margin-top: var(--spacing-9xl);  margin-bottom: var(--spacing-9xl); }

  /* margin-top-* */
  .margin-top-none  { margin-top: var(--spacing-none); }
  .margin-top-xxs   { margin-top: var(--spacing-xxs); }
  .margin-top-xs    { margin-top: var(--spacing-xs); }
  .margin-top-sm    { margin-top: var(--spacing-sm); }
  .margin-top-md    { margin-top: var(--spacing-md); }
  .margin-top-lg    { margin-top: var(--spacing-lg); }
  .margin-top-xl    { margin-top: var(--spacing-xl); }
  .margin-top-2xl   { margin-top: var(--spacing-2xl); }
  .margin-top-3xl   { margin-top: var(--spacing-3xl); }
  .margin-top-4xl   { margin-top: var(--spacing-4xl); }
  .margin-top-5xl   { margin-top: var(--spacing-5xl); }
  .margin-top-6xl   { margin-top: var(--spacing-6xl); }
  .margin-top-7xl   { margin-top: var(--spacing-7xl); }
  .margin-top-8xl   { margin-top: var(--spacing-8xl); }
  .margin-top-9xl   { margin-top: var(--spacing-9xl); }

  /* margin-bottom-* */
  .margin-bottom-none  { margin-bottom: var(--spacing-none); }
  .margin-bottom-xxs   { margin-bottom: var(--spacing-xxs); }
  .margin-bottom-xs    { margin-bottom: var(--spacing-xs); }
  .margin-bottom-sm    { margin-bottom: var(--spacing-sm); }
  .margin-bottom-md    { margin-bottom: var(--spacing-md); }
  .margin-bottom-lg    { margin-bottom: var(--spacing-lg); }
  .margin-bottom-xl    { margin-bottom: var(--spacing-xl); }
  .margin-bottom-2xl   { margin-bottom: var(--spacing-2xl); }
  .margin-bottom-3xl   { margin-bottom: var(--spacing-3xl); }
  .margin-bottom-4xl   { margin-bottom: var(--spacing-4xl); }
  .margin-bottom-5xl   { margin-bottom: var(--spacing-5xl); }
  .margin-bottom-6xl   { margin-bottom: var(--spacing-6xl); }
  .margin-bottom-7xl   { margin-bottom: var(--spacing-7xl); }
  .margin-bottom-8xl   { margin-bottom: var(--spacing-8xl); }
  .margin-bottom-9xl   { margin-bottom: var(--spacing-9xl); }

  /* margin-left-* */
  .margin-left-none  { margin-left: var(--spacing-none); }
  .margin-left-xxs   { margin-left: var(--spacing-xxs); }
  .margin-left-xs    { margin-left: var(--spacing-xs); }
  .margin-left-sm    { margin-left: var(--spacing-sm); }
  .margin-left-md    { margin-left: var(--spacing-md); }
  .margin-left-lg    { margin-left: var(--spacing-lg); }
  .margin-left-xl    { margin-left: var(--spacing-xl); }
  .margin-left-2xl   { margin-left: var(--spacing-2xl); }
  .margin-left-3xl   { margin-left: var(--spacing-3xl); }
  .margin-left-4xl   { margin-left: var(--spacing-4xl); }
  .margin-left-5xl   { margin-left: var(--spacing-5xl); }
  .margin-left-6xl   { margin-left: var(--spacing-6xl); }
  .margin-left-7xl   { margin-left: var(--spacing-7xl); }
  .margin-left-8xl   { margin-left: var(--spacing-8xl); }
  .margin-left-9xl   { margin-left: var(--spacing-9xl); }

  /* margin-right-* */
  .margin-right-none  { margin-right: var(--spacing-none); }
  .margin-right-xxs   { margin-right: var(--spacing-xxs); }
  .margin-right-xs    { margin-right: var(--spacing-xs); }
  .margin-right-sm    { margin-right: var(--spacing-sm); }
  .margin-right-md    { margin-right: var(--spacing-md); }
  .margin-right-lg    { margin-right: var(--spacing-lg); }
  .margin-right-xl    { margin-right: var(--spacing-xl); }
  .margin-right-2xl   { margin-right: var(--spacing-2xl); }
  .margin-right-3xl   { margin-right: var(--spacing-3xl); }
  .margin-right-4xl   { margin-right: var(--spacing-4xl); }
  .margin-right-5xl   { margin-right: var(--spacing-5xl); }
  .margin-right-6xl   { margin-right: var(--spacing-6xl); }
  .margin-right-7xl   { margin-right: var(--spacing-7xl); }
  .margin-right-8xl   { margin-right: var(--spacing-8xl); }
  .margin-right-9xl   { margin-right: var(--spacing-9xl); }
}