화면 전체가 아니라 컴포넌트가 놓인 공간을 기준으로 스타일을 바꿉니다.
container-type:inline-size를 지정하면 자식이 @container로 가장 가까운 query container의 인라인 크기를 검사할 수 있습니다. 같은 카드가 넓은 본문과 좁은 사이드바에 재사용될 때 viewport media query보다 컴포넌트 중심으로 설계하기 좋습니다.
.course-shell에 container-type: inline-size를 주었으므로 안쪽 카드의 @container 조건은 화면이 아니라 .course-shell의 가로 폭을 검사합니다. 이 실습에서 그 폭은 502px까지 넓어져 min-width: 420px를 만족하므로 카드가 140px 표지 열과 설명 열로 나뉘고, align-items: center가 두 열을 세로 가운데로 맞춥니다. 420px보다 좁은 곳에 두면 조건이 풀려 표지가 설명 위로 올라갑니다.
inline-size 컨테이너는 가로 크기를 내용에서 정할 수 없어서, inline-block이나 float처럼 내용 폭에 맞춰 줄어드는 자리에 두면 폭이 0에 가깝게 쪼그라듭니다. 또 cqi 단위는 쿼리 컨테이너 가로 폭의 1%라서, 제목 글자 크기도 화면이 아니라 카드가 놓인 공간에 맞춰 바꿀 수 있습니다.
query를 사용하려면 조상에 container-type이 필요합니다. 자기 자신의 크기를 같은 요소의 container query로 검사할 수는 없습니다.
직접 바꿔보세요course-shell의 폭을 줄이고 기준값을 320px로 바꾸세요.