Use grid and layout guides

Apply the 8-column grid and layout guides to the checkout screens and lock the grid so engineers can reference it. Before handing off, check the grid overlay on desktop, tablet, and mobile breakpoints assigned to Dana, and ensure that constraints on the header and primary CTA maintain alignment across sizes. Add a short note in the file explaining the grid logic.

Before I enforce the global grid across pages, make reviewing layout easier for engineers: surface which components will need new constraints, highlight any elements that currently ignore the layout (absolute positioned hero, floating chips), and recommend which breakpoints need manual tweaks. Suggest a single-sentence rationale for the grid rules for the handoff doc.

I just applied the layout grid and at 768px the hero image overlaps the header. I need the most likely cause and the fastest fix that won’t force a redesign: what constraint or layer change should I try first, and what short explanation do I give Marcus the front-end lead so he knows whether to patch CSS or wait for a design tweak?

Every release the team spends hours realigning components after I change grid rules. Where is my habit failing — am I not defining constraints, not documenting exceptions, or not reviewing key breakpoints — and what three changes to my workflow will cut cross-breakpoint rework and make handoffs predictable?