Problem description

Given HTML markup with a <section class="dashboard"> containing multiple <div class="card"> elements (each with a header and a details section), write CSS to:

• Define the dashboard as a querying container (container-type: inline-size) and use CSS Grid for layout.

• Use CSS Container Queries to switch between one, two, and three columns at breakpoints of 400px and 800px.

• Apply clamp() on the card header font-size to scale between 1rem and 2rem based on container width.

• Style cards with a frosted-glass effect: background: rgba(255,255,255,0.2), backdrop-filter: blur(8px), border-radius: 12px, and a subtle shadow.

• Inside each card, hide the .card-details by default and reveal it when the card’s inline size exceeds 300px via a Container Query.

• Provide a single-column fallback layout when Container Queries are unsupported.

Goal

Write CSS rules leveraging Container Queries, custom properties, and advanced functions to build a responsive glassmorphic dashboard that adapts both layout and internal content dynamically without JavaScript.

Constraints

• Use only CSS (no JavaScript).

• Dashboard should be container-type: inline-size; display: grid; gap: var(--gap, 1rem);.

• Default grid should be grid-template-columns: 1fr;.

• Container Query breakpoints should be at min-width: 400px → 2 columns; at min-width: 800px → 3 columns.

• Card header font-size should be clamp(1rem, 2vw, 2rem).

• Card style should be semi-transparent white, blur radius 8px, 12px border-radius, and drop-shadow.

• Hide .card-details by default (display: none;), show when container min-width: 300px.

• Ensure graceful degradation if Container Queries are not supported (single-column grid, details always visible).

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.