I especially liked the fact that you can use the size of the container element to calculate the size of the children. This is super useful when you want to make sure your text takes the full width of the container regardless of the screen. No need for breakpoints!

    <head>
    ...
      <style>
        .example {
          container-type: inline-size;
        }
    
        @container (min-width: 200px) {
          h1 {
            font-size: 15cqw;
            font-family: monospace;
          }
        }
      </style>
    </head>

    <body>
      <div class="example">
        <h1>hello world</h1>
      </div>
    </body>