Make components to adapt to the container width instead of screen size, and using this capability on carousel's arrows

[wyunreal]

Problem:
As components are using the screen size to adapt to different viewports, if you use a grid layout, the components on the columns won't adapt well to the available space.
An example of this can be shown on the carousel: the arrows aren't positioned correctly.

Solution: Create a context to pass down the available space components have, in terms of small/med/wide desktop column, mobile or tablet.

A considered alternative could be just passing the exact column width, but discarded due to not needed.

[sergivillar]

@wyunreal could this issue be closed? as the related PR seems merged