08 Explained solutions
Compare the reasoning, not just the final appearance. Other correct solutions can satisfy the same requirements.
1. Expected behavior and honest evidence
At 320px, the reference should stack the hero and cards and wrap the header. At the 48rem breakpoint (normally 768 CSS pixels with a 16px initial font size), its media query adds three card columns. At 1280px, the container stops growing at its maximum width. Your report should record actual observed behavior; differing user settings can affect the exact threshold.
2. Keyboard journey
The skip link precedes navigation. A native summary can be activated from the keyboard, and labels identify each form control. Focus should remain visible. If a rule removes outline, remove or replace it; if a container clips it, inspect that container rather than merely thickening the outline.
3. Stress repair
A good repair allows content to wrap and containers to grow. Examples include removing height, using max-width instead of a rigid width, and using min-width: 0 for an item constrained by layout. Do not write “passed” unless you ran the check. A screenshot at one zoom level is not evidence for another.