Problem description

A .container holds multiple .panel elements. The requirement is as follows:

• Widths ≤ 600px: Single column

• Widths > 600px and ≤ 900px: Two columns

• Widths > 900px: Three columns

All columns should maintain equal height and fluid spacing.

Goal

Use Flexbox and media queries to achieve an adaptive column count while preserving equal heights.

Constraints

Only CSS can be used; the HTML must remain unchanged and no JavaScript is allowed.

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.