A responsive layout class that centers content, applies a mobile gutter, and constrains width at named breakpoints. On mobile the container is full-width with horizontal padding; from $desktop upward the padding is removed and max-width is set by subtracting a caller-supplied offset from each breakpoint value.
.containerMixin:
@mixin container($container-offset, $mobile-gutter) Base styles (always applied)
| Property | Value | Purpose |
|---|---|---|
| flex-grow | 1 | Fills available flex space inside a flex parent. |
| margin | 0 auto | Horizontally centres the container. |
| position | relative | Establishes a positioning context for absolutely-placed children. |
| width | 100% | Full width on mobile before breakpoints constrain it. |
| padding | 0 $mobile-gutter | Prevents content touching viewport edges on small screens. |
Breakpoint behaviour
Each breakpoint uses the mx.from() min-width mixin, so rules cascade upward. The padding: unset at desktop is set once and inherited by wider breakpoints — no need to repeat it.