/* ❌ Fighting extremes with media queries */
.card {
width: 300px;
}
@media (max-width: 600px) {
.card { width: 100%; }
}
/* ✅ Balance with min() */
.card {
width: min(400px, 100%);
padding: min(2rem, 5vw);
}
/* Heavy becomes light, light becomes heavy */
Container shrinks → Card adapts naturally
"The heavy is the root of the light." — TTC 26
Drag viewport: card stays roomy on desktop, snug on phone—one line controls both extremes.