Container Query

부모 컨테이너를 기준으로 스타일 적용 가능
inline-size - 가로 크기 기준
size - 세로 크기 기준

.container {
	container-type: inline-size;
    /* 컨테이너에 이름을 지어줄 수 있다 */
    container-name: item;
}

@container item (min-width:576px){
    .child {
    	col or: white;
	}
}

Media Query와 다른점

media-query는 뷰포트를 기준으로 작동하지만
container-query는 부모 컨테이너를 기준으로 더 유연한 반응형 디자인이 가능하고 컴포넌트 기반 디자인할 때 유용하다.