メディアクエリで、em,remで設定したブレークポイントがうまくいかない

実現したいこと・発生している問題

メディアクエリで、em,remで設定したブレークポイントが意図した箇所になりません。

divを３つ作り、それぞれmax-width: 400px, 40em,　40remでメディアクエリを設定し、同じタイミング(width: 400px)でbackground:yellow;が適用されることを想定していたのですが、em,remのブレークポイントがなぜか640pxになってしまいます。
Chrome, Firefox共に同じ挙動でした。（ブラウザのフォントサイズは16pxです）

divのwidthなどはem, rem共に想定した幅になるので、メディアクエリだけおかしくなる原因がわからず困っています。どなたか教えてくださると嬉しいです。。！

codepen↓
https://codepen.io/yuki-ten/pen/qBrrYXd

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="style.css">
7  <title>Document</title>
8</head>
9<body>
10  <div class="box-px box">px</div>
11  <div class="box-em box">em</div>
12  <div class="box-rem box">rem</div>
13</body>
14</html>

css
1*,
2*::after,
3*::before {
4  margin: 0;
5  padding: 0;
6  box-sizing: inherit;
7}
8html {
9  font-size: 62.5%;
10}
11body {
12  box-sizing: border-box;
13}
14
15.box {
16  margin-top: 2rem;
17  height: 150px;
18}
19
20/* px */
21.box-px {
22  background: orange;
23  width: 600px;
24}
25@media (max-width: 400px) {
26  .box-px {
27    background: yellow;
28  }
29}
30
31/* em */
32.box-em {
33  background: rgb(80, 199, 0);
34  width: 60em;
35}
36@media (max-width: 40em) {
37  .box-em {
38    background: yellow;
39  }
40}
41
42/* rem */
43.box-rem {
44  background: rgb(63, 67, 255);
45  width: 60rem;
46}
47@media (max-width: 40rem) {
48  .box-rem {
49    background: yellow;
50  }
51}