CSS Container Queries

I've always seen responsive elements styled with CSS media queries. These often need more media queries to make them look good on different page sections. There's a way to skip the headache.

Use of [container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/@container) to apply CSS styles with the element's container size in mind instead of the viewport size:

```css
/* Create a container context */
.container {
  container-type: inline-size;
}

/* Default font size */
.card h2 {
  font-size: 1em;
}

/* Updated font size when the container is larger than 500px */
@container (min-width: 500px) {
  .card h2 {
    font-size: 2em;
    color: gray;
  }
}
```

```html
<div class="container">
  <div class="card">
    <h2>Card title</h2>
  </div>
</div>
```
[Example](https://jsfiddle.net/4n2ywhpa/)

carlos-araoz
November 17, 2022