When a snippet is in grid mode, the grid items horizontal padding can be modified with the "Padding (Y, X)" option. When we are in mobile view, the display is back to `flex`, in order for the layout to look like the snippets in normal mode.

However, while the normal mode columns all have the same padding, which depends on the `--gutter-x` CSS variable, the grid items still keep the horizontal grid padding, making them misaligned with the other contents.

An other inconsistency in grid mode is the `--gutter-x` variable: in order for the container to be well aligned with the header, it was set to 0 (except when the container is full-width, where it is 30px). The issue is that this rule is applied on mobile too, making the container inconsistent with the normal snippets.

This commit fixes these issues by blocking the horizontal grid padding in mobile view, and by setting the `--gutter-x` variable rule only for the desktop view.

This commit also moves the rule added in commit [1], which is used to compensate the margins of the rows that are direct children of grid items. Indeed, now that the padding is not variable in mobile view, this rule is only needed in desktop view.

[1]: https://github.com/odoo/odoo/commit/d7c2f8b4a3535f5c15043226a296d10be4208cec

task-4194685

Forward-Port-Of: odoo/odoo#180665
Forward-Port-Of: odoo/odoo#180649