fix(layout): Section headers overlap with content cards between 1280px and 1410px viewports

[bartosz-korec]

Description

There is a responsive layout overflow issue where large side headers (e.g., "Experience", "Education") get overlapped and clipped by the content cards on the right. This layout break occurs specifically on desktop viewports between 1280px and 1410px width before the grid system collapses into a single column.

Steps to Reproduce

1. Open the portfolio template in any modern desktop browser (Firefox/Chrome).
2. Enter DevTools and switch to Responsive Design Mode.
3. Resize the viewport width to any value between 1280px and 1410px (e.g., 1350px).
4. Observe the "Experience"

section headings.

Expected Behavior

The 12-column grid layout should switch to a single-column block layout sooner (at a higher breakpoint), or the left column text should wrap gracefully to prevent overlapping with adjacent cards.

Actual Behavior

• At 1410px, the content card touches the edge of the header ("e").

• As the viewport shrinks towards 1280px, the card completely cuts off the text (e.g., rendering as "Experienc").

Environment / Testing Parameters

• Tested Width Range: 1280px – 1410px
• Device Pixel Ratio (DPR): 1.25

Proposed Solution

Bumping the core grid breakpoints from xl:grid-cols-12 to 2xl:grid-cols-12 (and mapping column spans to 2xl:col-span-4 / 2xl:col-span-8 accordingly) gracefully forces a vertical stack layout on intermediate scaled displays, completely avoiding the layout blowout.