 # Colors

## PRIMARY
| Token 	| value 	| preview 	|
|-	|-	|-	|
| --primary 	| `#773EB5` 	| ![#773EB5](https://via.placeholder.com/15/0070DD/000000?text=+) 	|
| --primary-dark 	| `#773EB5` 	| ![#773EB5](https://via.placeholder.com/15/00509F/000000?text=+) 	|
| --primary-darker 	| `#49266F` 	| ![#49266F](https://via.placeholder.com/15/003365/000000?text=+) 	|
| --primary-light 	| `#4F9DE7` 	| ![#4F9DE7](https://via.placeholder.com/15/4F9DE7/000000?text=+) 	|
| --primary-lighter 	| `#97C5F0` 	| ![#97C5F0](https://via.placeholder.com/15/97C5F0/000000?text=+) 	|
| --primary-lightest 	| `#DCECF9` 	| ![#DCECF9](https://via.placeholder.com/15/DCECF9/000000?text=+) 	|
## ALERT
| Token 	| value 	| preview 	|
|-	|-	|-	|
| --alert 	| `#D93737` 	| ![#D93737](https://via.placeholder.com/15/D93737/000000?text=+) 	|
| --alert-dark 	| `#9C2828` 	| ![#9C2828](https://via.placeholder.com/15/9C2828/000000?text=+) 	|
| --alert-darker 	| `#631919` 	| ![#631919](https://via.placeholder.com/15/631919/000000?text=+) 	|
| --alert-light 	| `#EB776C` 	| ![#EB776C](https://via.placeholder.com/15/EB776C/000000?text=+) 	|
| --alert-lighter 	| `#F7ADA5` 	| ![#F7ADA5](https://via.placeholder.com/15/F7ADA5/000000?text=+) 	|
| --alert-lightest 	| `#F9E2E2` 	| ![#F9E2E2](https://via.placeholder.com/15/F9E2E2/000000?text=+) 	|

## SUCCESS
| Token 	| value 	| preview 	|
|-	|-	|-	|
| --success 	| `#2EA843` 	| ![#2EA843](https://via.placeholder.com/15/2EA843/000000?text=+) 	|
| --success-dark 	| `#227934` 	| ![#227934](https://via.placeholder.com/15/227934/000000?text=+) 	|
| --success-darker 	| `#154D26` 	| ![#154D26](https://via.placeholder.com/15/154D26/000000?text=+) 	|
| --success-light 	| `#71C077` 	| ![#71C077](https://via.placeholder.com/15/71C077/000000?text=+) 	|
| --success-lighter 	| `#A5D8AA` 	| ![#A5D8AA](https://via.placeholder.com/15/A5D8AA/000000?text=+) 	|
| --success-lightest 	| `#D7EFDF` 	| ![#D7EFDF](https://via.placeholder.com/15/D7EFDF/000000?text=+) 	|

## WARNNING
| Token 	| value 	| preview 	|
|-	|-	|-	|
| --warning 	| `#FFC208` 	| ![#FFC208](https://via.placeholder.com/15/FFC208/000000?text=+) 	|
| --warning-dark 	| `#B78707` 	| ![#B78707](https://via.placeholder.com/15/B78707/000000?text=+) 	|
| --warning-darker 	| `#6B4A06` 	| ![#6B4A06](https://via.placeholder.com/15/6B4A06/000000?text=+) 	|
| --warning-light 	| `#FFD462` 	| ![#FFD462](https://via.placeholder.com/15/FFD462/000000?text=+) 	|
| --warning-lighter 	| `#FFE597` 	| ![#FFE597](https://via.placeholder.com/15/FFE597/000000?text=+) 	|
| --warning-lightest 	| `#FFF5C7` 	| ![#FFF5C7](https://via.placeholder.com/15/FFF5C7/000000?text=+) 	|

## NEUTRALS
| Token 	| value 	| preview 	|
|-	|-	|-	|
| --inverse 	| `#2F2F2F` 	| ![#2F2F2F](https://via.placeholder.com/15/2F2F2F/000000?text=+) 	|
| --inverse-light 	| `#595959` 	| ![#595959](https://via.placeholder.com/15/595959/000000?text=+) 	|
| --inverse-lighter 	| `#868686` 	| ![#868686](https://via.placeholder.com/15/868686/000000?text=+) 	|
| --inverse-lightest 	| `#A6A6A6` 	| ![#A6A6A6](https://via.placeholder.com/15/A6A6A6/000000?text=+) 	|
| --secondary 	| `#773EB5` 	| ![#773EB5](https://via.placeholder.com/15/D5D5D5/000000?text=+) 	|
| --secondary-dark 	| `#49266F` 	| ![#49266F](https://via.placeholder.com/15/C5C5C5/000000?text=+) 	|
| --secondary-light 	| `#613394` 	| ![#613394](https://via.placeholder.com/15/E5E5E5/000000?text=+) 	|
| --secondary-lighter 	| `#ECECEC` 	| ![#ECECEC](https://via.placeholder.com/15/ECECEC/000000?text=+) 	|
| --secondary-lightest 	| `#F4F4F4` 	| ![#F4F4F4](https://via.placeholder.com/15/F4F4F4/000000?text=+) 	|

## ACCENT1
| Token 	| value 	| preview 	|
|-	|-	|-	|
| --accent1 	| `#F07D00` 	| ![#F07D00](https://via.placeholder.com/15/F07D00/000000?text=+) 	|
| --accent1-dark 	| `#B35F13` 	| ![#B35F13](https://via.placeholder.com/15/B35F13/000000?text=+) 	|
| --accent1-darker 	| `#743208` 	| ![#743208](https://via.placeholder.com/15/743208/000000?text=+) 	|
| --accent1-light 	| `#FEAC5F` 	| ![#FEAC5F](https://via.placeholder.com/15/FEAC5F/000000?text=+) 	|
| --accent1-lighter 	| `#FFC998` 	| ![#FFC998](https://via.placeholder.com/15/FFC998/000000?text=+) 	|
| --accent1-lightest 	| `#FDE6CE` 	| ![#FDE6CE](https://via.placeholder.com/15/FDE6CE/000000?text=+) 	|

## ACCENT2
| Token 	| value 	| preview 	|
|-	|-	|-	|
| --accent2 	| `#7A53B2` 	| ![#7A53B2](https://via.placeholder.com/15/7A53B2/000000?text=+) 	|
| --accent2-dark 	| `#644491` 	| ![#644491](https://via.placeholder.com/15/644491/000000?text=+) 	|
| --accent2-darker 	| `#4E3572` 	| ![#4E3572](https://via.placeholder.com/15/4E3572/000000?text=+) 	|
| --accent2-light 	| `#9D7EC6` 	| ![#9D7EC6](https://via.placeholder.com/15/9D7EC6/000000?text=+) 	|
| --accent2-lighter 	| `#BFAADA` 	| ![#BFAADA](https://via.placeholder.com/15/BFAADA/000000?text=+) 	|
| --accent2-lightest 	| `#E0D8EE` 	| ![#E0D8EE](https://via.placeholder.com/15/E0D8EE/000000?text=+) 	|

## ACCENT3
| Token 	| value 	| preview 	|
|-	|-	|-	|
| --accent3 	| `#3D51D4` 	| ![#3D51D4](https://via.placeholder.com/15/3D51D4/000000?text=+) 	|
| --accent3-dark 	| `#2C3A98` 	| ![#2C3A98](https://via.placeholder.com/15/2C3A98/000000?text=+) 	|
| --accent3-darker 	| `#1C2561` 	| ![#1C2561](https://via.placeholder.com/15/1C2561/000000?text=+) 	|
| --accent3-light 	| `#7583E1` 	| ![#7583E1](https://via.placeholder.com/15/7583E1/000000?text=+) 	|
| --accent3-lighter 	| `#ABB4ED` 	| ![#ABB4ED](https://via.placeholder.com/15/ABB4ED/000000?text=+) 	|
| --accent3-lightest 	| `#E2E5F9` 	| ![#E2E5F9](https://via.placeholder.com/15/E2E5F9/000000?text=+) 	|

## ACCENT4
| Token | value 	| preview 	|
|-	|-	|-	|
| --accent4 	| `#82C91E` 	| ![#82C91E](https://via.placeholder.com/15/82C91E/000000?text=+) 	|
| --accent4-dark 	| `#578715` 	| ![#578715](https://via.placeholder.com/15/578715/000000?text=+) 	|
| --accent4-darker 	| `#304A0B` 	| ![#304A0B](https://via.placeholder.com/15/304A0B/000000?text=+) 	|
| --accent4-light 	| `#A6D763` 	| ![#A6D763](https://via.placeholder.com/15/A6D763/000000?text=+) 	|
| --accent4-lighter 	| `#C6E599` 	| ![#C6E599](https://via.placeholder.com/15/C6E599/000000?text=+) 	|
| --accent4-lightest 	| `#E3F3CE` 	| ![#E3F3CE](https://via.placeholder.com/15/E3F3CE/000000?text=+) 	|

# > UTILITIES
# SPACING
| token        	| value 	|
|--------------	|-------	|
| --spacing-xs 	| 1px   	|
| --spacing-s  	| 2px   	|
| --spacing-m  	| 4px   	|
| --spacing    	| 8px   	|
| --spacing-l  	| 12px  	|
| --spacing-2  	| 16px  	|
| --spacing-xl 	| 24px  	|
| --spacing-3  	| 32px  	|
| --spacing-4  	| 48px  	|
| --spacing-5  	| 64px  	|
| --spacing-6  	| 96px  	|
| --spacing-7  	| 128px 	|
| --spacing-8  	| 176px 	|
| --spacing-9  	| 256px 	|

### Notation
The classes are named using the format {property}{sides}-{size} 

Where property is one of:  

m - for classes that set margin  
p - for classes that set padding  
Where sides is one of:

t - for classes that set margin-top or padding-top<br>    
b - for classes that set margin-bottom or padding-bottom<br>  
l - for classes that set margin-left or padding-left<br>  
r - for classes that set margin-right or padding-right<br>  
x - for classes that set both *-left and *-right<br>  
y - for classes that set both *-top and *-bottom<br>   
blank - for classes that set a margin or padding on all 4 sides of the element<br>  
Where size is one of:
| value | properites |
| ----- | ---------- |         
| **0** |  0 ; |
| **1** |  --spacing-xs ;|
| **2** |  --spacing-s ; |
| **3** |  --spacing-m ; |
| **4** |  --spacing ; |
| **5** |  --spacing-l ; |
| **6** |  --spacing-2 ; |
| **7** |  --spacing-xl ; |
| **8** |  --spacing-3 ; |
| **9** |  --spacing-4 ; |
| **10** |  --spacing-5 ; |
| **11** |  --spacing-6 ; |
| **12** |  --spacing-7 ; |
| **13** |  --spacing-8 ; |
| **14** |  --spacing-9 ; |
| **auto** |  auto ; |



| MARGIN CLASSES 	| PADDING CLASSES 	|
|-	|-	|
| **.m-0** 	| **.p-0** 	|
| **.m-1** 	| **.p-1** 	|
| **.m-2** 	| **.p-2** 	|
| **.m-3** 	| **.p-3** 	|
| **.m-4** 	| **.p-4** 	|
| **.m-5** 	| **.p-5** 	|
| **.m-6** 	| **.p-6** 	|
| **.m-7** 	| **.p-7** 	|
| **.m-8** 	| **.p-8** 	|
| **.m-9** 	| **.p-9** 	|
| **.m-10** 	| **.p-10** 	|
| **.m-11** 	| **.p-11** 	|
| **.m-12** 	| **.p-12** 	|
| **.m-13** 	| **.p-13** 	|
| **.m-14** 	| **.p-14** 	|
| **.m-auto** 	| **.p-auto** 	|
| **.mx-0** 	| **.px-0** 	|
| **.mx-1** 	| **.px-1** 	|
| **.mx-2** 	| **.px-2** 	|
| **.mx-3** 	| **.px-3** 	|
| **.mx-4** 	| **.px-4** 	|
| **.mx-5** 	| **.px-5** 	|
| **.mx-6** 	| **.px-6** 	|
| **.mx-7** 	| **.px-7** 	|
| **.mx-8** 	| **.px-8** 	|
| **.mx-9** 	| **.px-9** 	|
| **.mx-10** 	| **.px-10** 	|
| **.mx-11** 	| **.px-11** 	|
| **.mx-12** 	| **.px-12** 	|
| **.mx-13** 	| **.px-13** 	|
| **.mx-14** 	| **.px-14** 	|
| **.mx-auto** 	| **.px-auto** 	|
| **.my-0** 	| **.py-0** 	|
| **.my-1** 	| **.py-1** 	|
| **.my-2** 	| **.py-2** 	|
| **.my-3** 	| **.py-3** 	|
| **.my-4** 	| **.py-4** 	|
| **.my-5** 	| **.py-5** 	|
| **.my-6** 	| **.py-6** 	|
| **.my-7** 	| **.py-7** 	|
| **.my-8** 	| **.py-8** 	|
| **.my-9** 	| **.py-9** 	|
| **.my-10** 	| **.py-10** 	|
| **.my-11** 	| **.py-11** 	|
| **.my-12** 	| **.py-12** 	|
| **.my-13** 	| **.py-13** 	|
| **.my-14** 	| **.py-14** 	|
| **.my-auto** 	| **.py-auto** 	|
| **.mt-0** 	| **.pt-0** 	|
| **.mt-1** 	| **.pt-1** 	|
| **.mt-2** 	| **.pt-2** 	|
| **.mt-3** 	| **.pt-3** 	|
| **.mt-4** 	| **.pt-4** 	|
| **.mt-5** 	| **.pt-5** 	|
| **.mt-6** 	| **.pt-6** 	|
| **.mt-7** 	| **.pt-7** 	|
| **.mt-8** 	| **.pt-8** 	|
| **.mt-9** 	| **.pt-9** 	|
| **.mt-10** 	| **.pt-10** 	|
| **.mt-11** 	| **.pt-11** 	|
| **.mt-12** 	| **.pt-12** 	|
| **.mt-13** 	| **.pt-13** 	|
| **.mt-14** 	| **.pt-14** 	|
| **.mt-auto** 	| **.pt-auto** 	|
| **.mb-0** 	| **.pb-0** 	|
| **.mb-1** 	| **.pb-1** 	|
| **.mb-2** 	| **.pb-2** 	|
| **.mb-3** 	| **.pb-3** 	|
| **.mb-4** 	| **.pb-4** 	|
| **.mb-5** 	| **.pb-5** 	|
| **.mb-6** 	| **.pb-6** 	|
| **.mb-7** 	| **.pb-7** 	|
| **.mb-8** 	| **.pb-8** 	|
| **.mb-9** 	| **.pb-9** 	|
| **.mb-10** 	| **.pb-10** 	|
| **.mb-11** 	| **.pb-11** 	|
| **.mb-12** 	| **.pb-12** 	|
| **.mb-13** 	| **.pb-13** 	|
| **.mb-14** 	| **.pb-14** 	|
| **.mb-auto** 	| **.pb-auto** 	|
| **.mr-0** 	| **.pr-0** 	|
| **.mr-1** 	| **.pr-1** 	|
| **.mr-2** 	| **.pr-2** 	|
| **.mr-3** 	| **.pr-3** 	|
| **.mr-4** 	| **.pr-4** 	|
| **.mr-5** 	| **.pr-5** 	|
| **.mr-6** 	| **.pr-6** 	|
| **.mr-7** 	| **.pr-7** 	|
| **.mr-8** 	| **.pr-8** 	|
| **.mr-9** 	| **.pr-9** 	|
| **.mr-10** 	| **.pr-10** 	|
| **.mr-11** 	| **.pr-11** 	|
| **.mr-12** 	| **.pr-12** 	|
| **.mr-13** 	| **.pr-13** 	|
| **.mr-14** 	| **.pr-14** 	|
| **.mr-auto** 	| **.pr-auto** 	|
| **.ml-0** 	| **.pl-0** 	|
| **.ml-1** 	| **.pl-1** 	|
| **.ml-2** 	| **.pl-2** 	|
| **.ml-3** 	| **.pl-3** 	|
| **.ml-4** 	| **.pl-4** 	|
| **.ml-5** 	| **.pl-5** 	|
| **.ml-6** 	| **.pl-6** 	|
| **.ml-7** 	| **.pl-7** 	|
| **.ml-8** 	| **.pl-8** 	|
| **.ml-9** 	| **.pl-9** 	|
| **.ml-10** 	| **.pl-10** 	|
| **.ml-11** 	| **.pl-11** 	|
| **.ml-12** 	| **.pl-12** 	|
| **.ml-13** 	| **.pl-13** 	|
| **.ml-14** 	| **.pl-14** 	|
| **.ml-auto** 	| **.pl-auto** 	|


# ALIGN
| Class Name | properties |
| ----- | ---------- | 
| .align-baseline | vertical-align: baseline ; |
| .align-top | vertical-align: top ; |
| .align-middle | vertical-align: middle ; |
| .align-bottom | vertical-align: bottom ; |
| .align-text-bottom | vertical-align: text-bottom ; |
| .align-text-top | vertical-align: text-top ; |

# BACKGROUND
| Class Name | properties |
| ----- | ---------- | 
| .bg-primary | background-color: --primary ; |
| .bg-secondary | background-color: --secondary ; |
| .bg-success | background-color: --success ; |
| .bg-warning | background-color: --warning ; |
| .bg-danger | background-color: --alert ; |
| .bg-light | background-color: --white ; |
| .bg-dark | background-color: --inverse ; |
| .bg-transparent | background-color: transparent ; |

# FLEX
| Class Name | properties |
| ----- | ---------- | 
| .flex-fill | flex: 1 1 auto ; |
| .flex-row | flex-direction: row ; |
| .flex-column | flex-direction: column ; |
| .flex-row-reverse | flex-direction: row-reverse ; |
| .flex-column-reverse | flex-direction: column-reverse ; |
| .flex-grow-0 | flex-grow: 0 ; |
| .flex-grow-1 | flex-grow: 1 ; |
| .flex-shrink-0 | flex-shrink: 0 ; |
| .flex-shrink-1 | flex-shrink: 1 ; |
| .flex-wrap | flex-wrap: wrap ; |
| .flex-nowrap | flex-wrap: nowrap ; |
| .flex-wrap-reverse | flex-wrap: wrap-reverse ; |
| .justify-content-start | justify-content: flex-start ; |
| .justify-content-end | justify-content: flex-end ; |
| .justify-content-center | justify-content: center ; |
| .justify-content-between | justify-content: space-between ; |
| .justify-content-around | justify-content: space-around ; |
| .justify-content-evenly | justify-content: space-evenly ; |
| .align-items-start | align-items: flex-start ; |
| .align-items-end | align-items: flex-end ; |
| .align-items-center | align-items: center ; |
| .align-items-baseline | align-items: baseline ; |
| .align-items-stretch | align-items: stretch ; |
| .align-content-start | align-content: flex-start ; |
| .align-content-end | align-content: flex-end ; |
| .align-content-center | align-content: center ; |
| .align-content-between | align-content: space-between ; |
| .align-content-around | align-content: space-around ; |
| .align-content-stretch | align-content: stretch ; |
| .align-self-auto | align-self: auto ; |
| .align-self-start | align-self: flex-start ; |
| .align-self-end | align-self: flex-end ; |
| .align-self-center | align-self: center ; |
| .align-self-baseline | align-self: baseline ; |
| .align-self-stretch | align-self: stretch ; |
| .order-first | order: -1 ; |
| .order-0 | order: 0 ; |
| .order-1 | order: 1 ; |
| .order-2 | order: 2 ; |
| .order-3 | order: 3 ; |
| .order-4 | order: 4 ; |
| .order-5 | order: 5 ; |
| .order-last | order: 6 ; |

# OVERFLOW
| Class Name | properties |
| ----- | ---------- | 
| .overflow-auto | overflow: auto !important; |
| .overflow-hidden | overflow: hidden !important; |

# POSITION
| Class Name | properties |
| ----- | ---------- | 
| .position-static | position: static ; |
| .position-relative | position: relative ; |
| .position-absolute | position: absolute ; |
| .position-fixed | position: fixed ; |
| .position-sticky | position: -webkit-sticky ;<br>position: sticky ; |


# SIZING
Width and height utilities includes support for 25%, 50%, 75%, and 100% by default.
## WIDTH
| Class Name | properties |
| ----- | ---------- | 
| .w-25 | width: 25% ; | 
| .w-50 | width: 50% ; | 
| .w-75 | width: 75% ; | 
| .w-100 | width: 100% ; | 
| .w-auto | width: auto ; | 
| .mw-100 | max-width: 100% ; | 
| .vw-100 | width: 100vw ; | 

## HEIGHT 
| Class Name | properties |
| ----- | ---------- | 
| .h-25 | height: 25% ;| 
| .h-50 | height: 50% ;| 
| .h-75 | height: 75% ; | 
| .h-100 | height: 100% ; | 
| .h-auto | height: auto ; | 
| .mh-100 | max-height: 100% ; | 
| .vh-100 | height: 100vh ; | 
| .min-vh-100 | min-height: 100vh ; | 

# DISPLAY
| Class Name | properties |
| ----- | ---------- |
| d-none | display: none ; | 
| d-inline | display: inline ; | 
| d-inline-block | display: inline-block ; | 
| d-block | display: block ; | 
| d-table | display: table ; | 
| d-table-row | display: table-row ; | 
| d-table-cell | display: table-cell ; | 
| d-flex | display: flex ; | 
| d-inline-flex | display: inline-flex ;| 

# UTILITY 

| value | properties |
| ----- | ---------- |
| hide-scroll-bar::-webkit-scrollbar | height: 0px;<br> <br>background: transparent;<br> |
| hide-scroll-bar | -ms-overflow-style: none;<br>scrollbar-width: none;<br> |
| ellipsis | overflow: hidden;<br>text-overflow: ellipsis;<br> |
| ellipsis--noWrap | white-space: nowrap;<br>overflow: hidden;<br>text-overflow: ellipsis;<br> |


## SHADOW
#### Color-mod() Function lets you modify colors using the color-mod() function in CSS.
Note: For more details [color-mod](https://www.npmjs.com/package/postcss-color-mod-function)

  | value | properties |
  | ----- | ---------- |
  | --primary-shadow | color-mod((--primary) a(0.16)) ; |
  | --secondary-shadow | color-mod((--secondary) a(0.16)) ; |
  | --success-shadow | color-mod((--success) a(0.16)) ; |
  | --alert-shadow | color-mod((--alert) a(0.16)) ; |
  | --warning-shadow | color-mod((--warning) a(0.16)) ; |
  | --accent1-shadow | color-mod((--accent1) a(0.16)) ; |
  | --accent2-shadow | color-mod((--accent2) a(0.16)) ; |
  | --accent3-shadow | color-mod((--accent3) a(0.16)) ; |
  | --accent4-shadow | color-mod((--accent4) a(0.16)) ; |
  | --inverse-shadow | color-mod((--inverse) a(0.16)) ; |

## TEXT-COLORS
   | value | properties |
   | ----- | ---------- |
   | --text | --night ; |
   | --text-subtle | --night-lighter ; |
   | --text-link | --primary ; |
   | --text-disabled | --inverse-lightest ; |
   | --text-destructive | --alert ; |
   | --text-white | --white ; |

## FONT-SIZE
   | value | properties |
   | ----- | ---------- |
   | --font-size-xxs | 4px; |
   | --font-size-xs | 8px; |
   | --font-size-s | 12px; |
   | --font-size | 14px; |
   | --font-size-m | 16px; |
   | --font-size-l | 20px; |
   | --font-size-xl | 28px; |
   | --font-size-xxl | 32px; |
   | --font-size-xxxl | 40px; |

## FONT-WEIGHT
  | value | properties |
  | ----- | ---------- |
  | --font-weight-normal | 400; |
  | --font-weight-medium | 600; |
  | --font-weight-bold | 700; |
  | --font-weight-bolder | 800; |

## Line height or Font height
  | value | properties |
  | ----- | ---------- |
  | --font-height-normal | normal; |
  | --font-height-s | 16px; |
  | --font-height | 20px; |
  | --font-height-m | 24px; |
  | --font-height-l | 32px; |
  | --font-height-xl | 40px; |
  | --font-height-xxl | 48px; |
  
## Letter spacing 
  | value | properties |
  | ----- | ---------- |
  | --letter-spacing | 0.5px; |

## border
  | value | properties |
  | ----- | ---------- |
  | --border |  (--spacing-xs) solid (--secondary); |
  | --border-s |  (--spacing-s) solid (--secondary); | 

## SHADOW
  | value | properties |
  | ----- | ---------- |
  | --shadow-s | 0 1px 4px 0 rgba(0, 0, 0, 0.16); | 
  | --shadow-m | 0 2px 8px 0 rgba(0, 0, 0, 0.16); | 
  | --shadow-l | 0 4px 16px 0 rgba(0, 0, 0, 0.16); | 
  | --shadow-spread | 0 0 0 3px; | 

## GRID COLUMNS
##### Set the number of columns and specify the width of the gutters. 
  | value | properties |
  | ----- | ---------- |
  | --grid-columns | 12; |

