Problem description

A .layout container holds two .panel elements. The task is to:

1. Use CSS Grid (grid-template-columns: 1fr 1fr) in modern browsers.

2. Detect Grid support via @supports and apply it.

3. For browsers without Grid (IE11), fall back to display: table and table-cell to maintain equal heights.

Goal

Implement a dual-mode equal height column layout that gracefully degrades for legacy browsers without JavaScript.

Constraints

Only CSS may be used; detect feature support with @supports and fall back accordingly. HTML must remain unchanged.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.