How do container queries differ from media queries?

Media queries ask about the viewport; container queries ask about the parent's size → a component adapts whether it sits in a sidebar or the main column.

.card-wrap { container-type: inline-size; container-name: card; }

@container card (min-width: 400px) {
  .card { display: grid; grid-template-columns: 120px 1fr; }
}

@media (min-width: 768px) { /* still right for page-level layout */ }

Units cqw / cqi resolve against the container. Rule of thumb: media queries for page layout, container queries for reusable components.