been messing around with container queries all morning. everyone's obsessed with viewport units but they're such a nightmare when you actually nest things inside sidebars or cards. if the parent shrinks, your text stays huge and breaks everything. i stopped using @media for component typography entirely. it's much better to just scope the font size to the container itself so it scales naturally regardless of where you drop the component in the layout.
.card-container {container-type: inline-size;}@container (max-width: 400px) {.card-title {font-size: 1.2rem;}}it's not a magic fix for everything but it's
perfect pretty much essential for modular design. i use this specifically for card grids where the columns collapse at different breakpoints. you don't have to write fifty different media queries for every possible screen width. just define the container and let the component handle its own business. works great for those weirdly sized sidebar widgets that nobody wants to manage manually. anyone else still relying on global media queries for component styles?