[CSS-in-js] Emotion styled components 관련 질문입니다.

const Wrapper = styled.div`
@media (max-width: 767px) {
  width: 760px;
  & > div {
    width: 700px;
  }
};
width: 1200px;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
margin: 0 auto;
& > div {
  width: 1000px;
}
`

1) 위의 내용과 같이 CSS-in-js 코드 작성하고 화면 너비를 767px 이하로 조정하였음에도 Wrapper 자손 div 선택자들의 너비가 width: 700px로 조정되지 않습니다. 아래 그림과 같이 @mobile 밖의 코드인 1000px로 계속 강제적용이 되는것으로 보입니다. 왜 이런 것인지 알 수 있을까요?

2) 논외로 위의 코드와 같이 & > div 를 이용하여 자손 div 태그들에 너비를 정해준 후, 따로 const 이용하여 자손 div 중 하나를 상수 지정하여 너비를 설정해주면, Wrapper에서 &>div를 이용해서 지정한 너비로 또 계속 강제적용되는 것으로 보입니다. & > div가 가장 우선적인 설정인가요?

답변 부탁드리겠습니다ㅠ