Description

This grid splits the content into a 1:4:1 grid - setting the left and right margins of a floating column that holds the content. The margins are dependent on the "width" of the column itself following the golden ratio proportions (more here: dependencies/grid).
This is applied to make the content "narrower" in width and should sit inside an u-page-grid layout (see: layout-patterns/page-grid).
To ensure an element follows the 'page' grid, an utility class needs to be added (see below).
The utility class makes use of the golden-ratio-padding mixin. The mixin is called with 3 parameters, first one representing the column width proportion related to the full width, next two setting the left, respectively the right margin (as proportions).
For the 'inner' grid purposes these parameters are set to (4,1,1).
This is not applied on small screens where the content goes back to full width.