grid bug - default span of elements without col-* class inside row is hard-coded to 12 for desktop

[lyubomir-popov]

Describe the bug

Our grid's .col-start-* classes reduce the number of columns available to a child row nested inside, but those .rows arent aware of that:
https://codepen.io/lyubomir-popov/pen/gOyNpwr
To Reproduce

Inspect the codepen above at screen sizes falling in our $breakpoint-medium

Expected behavior

a row placed inside a col class that has been offset with col-start-* classes should reduce the number of columns in itself accordingly.

Screenshots

If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

Add any other context about the problem here.

[bartaz]

As far as I understand grid columns are supposed to have one of the col-X class names that define their size. Using them without it is wrong and may create other issues.

We can have some defaults, but fixing this as suggested would encourage bad practice of skipping class names which may result in inconsistent styling.