====== CSS: Container Queries ======

Container queries let you style elements based on their //container's size//, not just the viewport size.

Container queries are an alternative to media queries, which apply styles to elements based on viewport size or other device characteristics.

**Browser support:** ✅ Good (March 2022)

Example:

<code css>
.parent {
  container-name: hero-banner;
}

/* When the container is greater than 60 characters... */
@container hero-banner (width > 60ch) {
  .child { 
    flex-direction: row;
  }
}

</code>