.demo_container_wrap {
  resize: horizontal;
  min-width: 320px;
  max-width: 640px;
  margin: 0 auto;
  padding: 1em;
  outline: 2px #999 dashed;
  overflow: hidden;
  font-weight: normal;
  text-align: center;
}
.demo_container_wrap .container {
  /* container-name: test; */
  container-type: inline-size;
  /* container: test / inline-size; */
}
.demo_container_wrap .container h1{
  font-size: 1.5em;
}
.demo_container_wrap .container p:last-of-type{
  display: none;
}
@container (min-width: 400px) {
  .demo_container_wrap .container h1 {
    font-weight: bold;
    font-size: 2em;
    color: orange;
  }
  .demo_container_wrap .container p {
    color: #999;
  }
  .demo_container_wrap .container p:last-of-type{
    display: block;
  }
}