해상도의 너비가 992px보다 작아질 때부터 기준 font-size 속성값을 줄입니다. 최종으로 너비가 400px 이하일 때 font-size 속성값은 11px이 되므로 똑같은 1rem 값이라고 해도 11(px) × 1(rem) = 11px로 계산됩니다. 따라서 rem 단위로 작성한 수치는 화면 너비에 비례해 줄어들게 됩니다.

이제 해상도 너비에 맞게 CSS 코드를 작성해서 반응형 처리를 하면 됩니다. 해상도가 1140px 이하일 때부터 작성하겠습니다. 화면의 해상도가 1140px보다 작아지면 메인 영역과 섹션 영역의 container 클래스의 기준 너비를 각각 다음과 같이 변경합니다.

@media screen and (max-width:1140px){
  /* 메인 영역 container 기준 너비 변경 */
  main .container{
    width:992px; /* 1140px -> 992px */
  }
  /* 섹션 영역 container 기준 너비 변경 - 2단으로 처리하기 위한 적정 너비 */
  section .container{
    width:600px; /* 1140px -> 600px */ 
  }
}