A col component has a size to define how many columns it spans over.

The size prop can be used in two different ways:

- Passing a number will set the column size for the `fromL` breakpoint while it defaults to full width for smaller viewports.
- Passing an object with sizes for the available breakpoints:
  - `default`: refers to viewports from **0 - 480px**
  - `theme.breakpoints.fromM`: refers to viewports from **480 - 1024px**
  - `theme.breakpoints.fromL`: refers to viewports over **1024px**