What is Container queries?🤔

Container queries are a new feature in CSS that allow you to apply styles to an element based on the size of the element's container. This is in contrast to media queries, which apply styles to elements based on the size of the viewport.

For example, you could use container queries to change the font size of a heading element based on the width of its container. If the container is narrower than 700px, the font size would be smaller, and if the container is wider than 700px, the font size would be larger.

@container (min-width: 700px) {
  .heading {
    font-size: 20px;
  }
}

@container (max-width: 700px) {
  .heading {
    font-size: 16px;
  }
}