Rebuild the styles

One file, styles.css. Start at the top with the things that affect everything: a box-sizing reset, your custom property tokens, base typography on body.

Define the tokens before you use them. Colours, a spacing scale, a type scale, radii. Four or five values per scale, not fifteen, a constrained scale makes decisions faster and the result more coherent, and you will notice the difference within the hour.

Then work outside in: page layout first, then sections, then components, then details. Fighting a detail before the layout around it is settled is the most common way to waste an hour here.

Decide each layout engine deliberately and write a comment saying why. Page shell: grid. Navigation bar: flex. Card gallery: grid with auto-fit. Media object: flex. If you catch yourself nesting three flex containers to make rows and columns, stop, that is a grid, and you know it now.

Do the responsive work with intrinsic tools first: clamp() for type, minmax() and auto-fit for the galleries, min() for widths. Add a media query only where the layout really needs to change structure rather than size. Two is a good target. Five means you have reached for the breakpoint reflex.

Use logical properties throughout. It costs you a few extra characters now and nothing later, and it is much easier to start this way than to convert.

When it looks right at desktop width, drag the window slowly from 320px to 1600px and fix everything that breaks. Then check it at 200% browser zoom, which is a real accessibility requirement and which almost nothing passes first time.

Finally, compare against the generated original side by side. Where they differ, decide: is yours worse, or is yours different-and-fine? Write down three differences and which category each is in. That judgement, being able to say "mine is not the same and mine is correct", is the actual outcome of this phase.