CSS Flexbox & Grid Generator-2

Generate clean, modern HTML and CSS (Flexbox or Grid) for a [LAYOUT_DESCRIPTION]. Requirements: 1) Must be fully responsive down to mobile screens (320px), 2) Use semantic HTML5 markup, 3) Use CSS Custom Properties for colors, 4) Follow BEM naming convention for classes, 5) Ensure accessibility (contrast, roles). Add comments explaining the layout logic.