Problem description

A .magazine container holds multiple .card elements. The task is to:

1. Use column-count and column-gap to create 3 magazine-style columns.

2. Ensure no .card is broken between columns by applying break-inside: avoid.

3. Dynamically control the number of columns via a custom property --cols.

Goal

Implement a magazine-style card layout with intact card blocks, responsive to changes in CSS variable --cols for dynamic column count.

Constraints

Only CSS may be used; HTML remains unchanged and no JavaScript is allowed.

Sample visual output

Here’s what the output would look like:

All cards appear intact in columns, no splits.

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