Device Specs:

Desktop

Breakpoint: ≥1280px

Container: 1180px

Margins: 50px

Columns: 12

Col Width: 6.78% (80px)

Gutter Width (L/R): 10px

Tablet

Breakpoint: ≥ 768px

Container: 708px

Margins: 30px

Columns: 12

Col Width: 6.78% (48px)

Gutter Width (L/R): 6px

Mobile

Breakpoint < 768px

Container: 100vw - 20px

Margins: 10px

Columns: 12

Col Width: 6.78%

Gutter Width (L/R): 5px

Grid Layouts:

100%

Breakpoint: ≥ 1280px

Container: 1180px

Margins: 50px

Example: Homepage Hero

25% / 75%

Breakpoint: ≥ 1280px

Container: 1180px

Margins: 50px

Example: Product Catalog

30% / 60% / 10%

Breakpoint: ≥ 1280px

Container: 1180px

Margins: 50px

Example: Case Study