:root {
  /* Space - Sizes */
  --space-none: 0;
  --space-xs: 16px;
  --space-s: 32px;
  --space-base: 64px;
  --space-m: 80px;
  --space-l: 120px;
  --space-xl: 240px;
  --space-xxl: 320px;
}

/* All paddings */
.padding-none { padding: var(--space-none); }
.padding-xs { padding: var(--space-xs); }
.padding-s { padding: var(--space-s); }
.padding-base { padding: var(--space-base); }
.padding-m { padding: var(--space-m); }
.padding-l { padding: var(--space-l); }
.padding-xl { padding: var(--space-xl); }
.padding-xxl { padding: var(--space-xxl); }

/* Top paddings */
.padding-top-none { padding-top: var(--space-none); }
.padding-top-xs { padding-top: var(--space-xs); }
.padding-top-s { padding-top: var(--space-s); }
.padding-top-base { padding-top: var(--space-base); }
.padding-top-m { padding-top: var(--space-m); }
.padding-top-l { padding-top: var(--space-l); }
.padding-top-xl { padding-top: var(--space-xl); }
.padding-top-xxl { padding-top: var(--space-xxl); }


/* Bottom paddings */
.padding-bottom-none { padding-bottom: var(--space-none); }
.padding-bottom-xs { padding-bottom: var(--space-xs); }
.padding-bottom-s { padding-bottom: var(--space-s); }
.padding-bottom-base { padding-bottom: var(--space-base); }
.padding-bottom-m { padding-bottom: var(--space-m); }
.padding-bottom-l { padding-bottom: var(--space-l); }
.padding-bottom-xl { padding-bottom: var(--space-xl); }
.padding-bottom-xxl { padding-bottom: var(--space-xxl); }

/* left paddings */
.padding-left-none { padding-left: var(--space-none); }
.padding-left-xs { padding-left: var(--space-xs); }
.padding-left-s { padding-left: var(--space-s); }
.padding-left-base { padding-left: var(--space-base); }
.padding-left-m { padding-left: var(--space-m); }
.padding-left-l { padding-left: var(--space-l); }
.padding-left-xl { padding-left: var(--space-xl); }
.padding-left-xxl { padding-left: var(--space-xxl); }


/* right paddings */
.padding-right-none { padding-right: var(--space-none); }
.padding-right-xs { padding-right: var(--space-xs); }
.padding-right-s { padding-right: var(--space-s); }
.padding-right-base { padding-right: var(--space-base); }
.padding-right-m { padding-right: var(--space-m); }
.padding-right-l { padding-right: var(--space-l); }
.padding-right-xl { padding-right: var(--space-xl); }
.padding-right-xxl { padding-right: var(--space-xxl); }


/* All margins */
.margin-none { margin: var(--space-none); }
.margin-xs { margin: var(--space-xs); }
.margin-s { margin: var(--space-s); }
.margin-base { margin: var(--space-base); }
.margin-m { margin: var(--space-m); }
.margin-l { margin: var(--space-l); }
.margin-xl { margin: var(--space-xl); }
.margin-xxl { margin: var(--space-xxl); }


/* Top margins */
.margin-top-none { margin-top: var(--space-none); }
.margin-top-xs { margin-top: var(--space-xs); }
.margin-top-s { margin-top: var(--space-s); }
.margin-top-base { margin-top: var(--space-base); }
.margin-top-m { margin-top: var(--space-m); }
.margin-top-l { margin-top: var(--space-l); }
.margin-top-xl { margin-top: var(--space-xl); }
.margin-top-xxl { margin-top: var(--space-xxl); }


/* left margins */
.margin-left-none { margin-left: var(--space-none); }
.margin-left-xs { margin-left: var(--space-xs); }
.margin-left-s { margin-left: var(--space-s); }
.margin-left-base { margin-left: var(--space-base); }
.margin-left-m { margin-left: var(--space-m); }
.margin-left-l { margin-left: var(--space-l); }
.margin-left-xl { margin-left: var(--space-xl); }
.margin-left-xxl { margin-left: var(--space-xxl); }


/* right margins */
.margin-right-none { margin-right: var(--space-none); }
.margin-right-xs { margin-right: var(--space-xs); }
.margin-right-s { margin-right: var(--space-s); }
.margin-right-base { margin-right: var(--space-base); }
.margin-right-m { margin-right: var(--space-m); }
.margin-right-l { margin-right: var(--space-l); }
.margin-right-xl { margin-right: var(--space-xl); }
.margin-right-xxl { margin-right: var(--space-xxl); }