画像がレスポンシブで表示されなくなる

模写コーディングをしています。
メインの画像が、レスポンシブの時に、表示されなくなります。
（pc版は問題なく表示されています。）

元のソースと見比べましたが、原因が不明です。
どういった要因が考えられますでしょうか。

シートはstylesheetとresponsive 分けて作成しています。

HTML
1</<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <title>Photo Book</title>
6    <meta name="description" content="写真集">
7
8    <!---レスポン--->
9<meta name="viewport" content="width=device-width,initial-scale=1">
10
11
12
13<link rel ="preconnect" href = "https://fonts.gstatic.com" crossorigin>
14<link href ="https：//fonts.googleapis.com/css2？family = M + PLUS + Rounded + 1c：wght @ 700＆ display = swap "rel =" stylesheet ">
15<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
16<link rel="stylesheet" href="css/style.css">
17
18<link rel="stylesheet" href="css/responsive.css" >
19
20<link rel="icon" type="image/png" href="img/favicon.ico">
21  </head>
22
23  <body>
24
25    <header id="header">
26      <h1 class="header-logo"><a href="PHOTO BOOK.html"><img class="logo" src="img/logo.svg" alt="PHOTO BOOK"></h1>
27        <nav>
28          <ul class="main-nav">
29          <li><a href="PHOTO BOOK.html">About</a></li>
30          <li><a href="PHOTO BOOK.html">Works</a></li>
31          <li><a href="PHOTO BOOK.html">News</a></li>
32          <li><a href="PHOTO BOOK.html">Contact</a></li>
33          <li><a href="https://www.instagram.com/"><img class="icon-instagram" src="img/icon-instagram.png" alt="インスタグラム"></a></li>
34          </ul>
35        </nav>
36    </header>
37
38
39
40    <main>
41      <div id="main-visual">
42      <picture>
43          <source media="(max-width: 600px)" srcset="img/mainvisual-sp.jpg">
44          <img src="img/mainvisual-pc.jpg" alt="main">
45      </picture>
46      </div>
47
48      <section id="About" class="wrapper">
49        <h2 class="section-title">About</h2>
50        <p>Xxxxx Ashley<br>
51          <br>
52            2th Floor xxxxx Building x-x-x Nishiazabu, Minato-ku, Tokyo 106-0031 Japan<br>
53            tel: 000-0000-0000<br>
54            url: www.xxxxxx.jp<br>
55            mail: xxx@xxxxxx.jp<br>
56            <br>
57            プロフィール<br>
58            テキストテキストテキストテキストテキストテキストテキスト
59            テキストテキストテキストテキストテキストテキストテキスト
60            テキストテキストテキストテキストテキストテキストテキスト
61            テキストテキストテキストテキストテキストテキストテキスト<br>
62          </p>
63        </section>
64
65        <section id="Works" class="wrapper">
66          <h2 class="section-title">Works</h2>
67          <div class="grid">
68            <img src="img/works1.jpg" alt="1">
69            <img src="img/works2.jpg" alt="1">
70            <img src="img/works3.jpg" alt="1">
71            <img src="img/works4.jpg" alt="1">
72            <img src="img/works5.jpg" alt="1">
73            <img src="img/works6.jpg" alt="1">
74          </div>
75        </section>
76
77        <section id="News" class="wrapper">
78          <h2 class="section-title">News</h2>
79          <dl>
80            <dt>2020.XX.XX</dt>
81            <dd>デザイン雑誌「ＸＸＸＸＸＸ Vol.11』に掲載していただきました。</dd>
82            <dt>2020.XX.XX</dt>
83            <dd>ＸＸ月ＸＸ日から写真集「ＸＸＸＸＸＸＸ」の販売を開始します。</dd>
84            <dt>2019.XX.XX</dt>
85            <dd>【イベント開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト</dd>
86            <dt>2019.XX.XX</dt>
87            <dd>デザイン雑誌「ＸＸＸＸＸＸ Vol.10』に掲載していただきました。</dd>
88            <dt>2019.XX.XX</dt>
89            <dd>【個展開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト</dd>
90          </dl>
91
92        </section>
93
94        <section id="Contact" class="wrapper">
95          <h2 class="section-title">Contact</h2>
96          <form class="form" action="index.html">
97            <dl>
98              <dt>
99              <label for="name">NAME</label>
100              </dt>
101              <dd>
102              <input type="text" id="name" name="your-name">
103              </dd>
104            </dl>
105
106            <dl>
107              <dt>
108              <label for="email">E-mail</label>
109              </dt>
110              <dd>
111              <input type="email" id="email" name="your-email">
112            </dd>
113            </dl>
114
115            <dl>
116              <dt>
117              <label for="message">MESSAGE</label>
118              </dt>
119              <dd>
120              <textarea id="message" name="your-message"></textarea>
121            </dd>
122            </dl>
123
124            <div class="buttom">
125            <input type="submit" value="送信">
126            </div>
127          </form>
128
129        </section>
130        </main>
131
132<footer id="footer">
133  <p><small>&copy;2020 My Work</small></p>
134</footer>
135
136
137  </body>
138
139
140</html>
141

###style css

css
1@charset "UTF-8";
2html {
3  font-size: 100%;
4}
5
6body{
7    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
8    line-height: 1.7;
9    color: #432;
10}
11a {
12    text-decoration: none;
13}
14img {
15    max-width: 100%;
16}
17
18body {
19    color: #24292e;;
20    font-size: 0.9rem;
21}
22
23#header {
24display: flex;
25justify-content: space-between;
26margin: 0 auto;
27height: 270px;
28align-items: center;
29max-width: 960px;
30padding: 0 4%;
31
32}
33
34
35
36.main-nav {
37  list-style: none;
38  display: flex;
39}
40
41.main-nav li{
42  margin-left: 36px;
43
44}
45
46.main-nav a {
47  color: #24292e;
48}
49.main-nav a:hover {
50  opacity: 0.7;
51}
52
53.icon-instagram {
54  width: 20px;
55}
56
57.icon-instagram a:hover {
58opacity: 0.7;
59}
60
61.wrapper {
62  max-width :1000px;
63  margin: 0 auto;
64  padding: 0 4%;
65  font-size: 0.9rem;
66
67
68}
69
70
71#main-visual {
72  margin-bottom: 80px;
73}
74
75#main-visual img {
76  max-width: 1920px;
77  width: 100%;
78  object-fit: cover ;
79  height: 420px;
80}
81
82.section-title {
83font-size: 1.5rem;
84text-align: center;
85margin-bottom: 65px;
86padding-top: 100px;
87}
88
89.grid {
90  display: grid;
91  gap: 26px;
92  grid-template-columns: 1fr 1fr 1fr;
93  margin-top: 6%;
94}
95
96#News dl {
97  display: flex;
98  flex-wrap: wrap;
99  border-top: solid 1px #c8c8c8;
100
101}
102
103#News dt {
104   width: 20%;
105   border-bottom: solid 1px #c8c8c8;
106   padding: 15px 15px;
107}
108
109#News dd {
110  width: 80%;
111  border-bottom: solid 1px #c8c8c8;
112  padding: 15px 15px;
113}
114
115#Contact dl {
116  display: flex;
117  flex-wrap: wrap;
118  margin: 20px;
119}
120
121#Contact dt{
122padding-right: 50px;
123width: 15%;
124}
125
126#Contact dd{
127  border: 1px solid #c8c8c8;
128  width: 85%;
129  height: 50px;
130
131}
132
133label {
134  font-size: 14px;
135}
136
137  #message {
138  height: 100px;
139  width: 85%;
140}
141
142#footer {
143background-color: #24292e;
144color: #fff;
145font-size: 0.5rem;
146text-align: center;
147padding: 10px 20px;
148
149}
150
151
152input[type="submit"]{
153  background-color: #24292e;
154  color: #fff;
155  width: 200px;
156  padding: 15px 0;
157  border: 1px solid #24292e;
158  text-align: center;
159  margin: 50px 0 150px 0 ;
160
161}
162
163.buttom {
164text-align: center;
165}
166
167input[type="submit"]:hover {
168background: #fff;
169 color: #24292e;
170}
171

responsive css

css
1@media screen and (max-width: 600px) {
2  .main-nav a{
3  color: #0bd;
4  }
5
6
7  #header {
8    max-width: 100%;
9    height: auto;
10    flex-direction: column;
11}
12
13
14
15  .header-logo {
16    margin-top: 20px;
17  }
18
19  .main-nav {
20    padding-bottom: 20px;
21  }
22
23  #News dl {
24  width: 100%;
25  }
26
27
28  #News dt {
29  width: 100%;
30  border-bottom: none;
31  padding: 10px 10px;
32  }
33
34  #News dd {
35  width: 100%;
36  padding: 10px 10px;
37  }
38
39  .section-title {
40  margin-bottom: 20px;
41  }
42
43  #Contact dl {
44    width: 100%;
45  }
46
47  #Contact dt{
48  width: 100%;
49  }
50
51  #Contact dd{
52    width: 100%;
53
54}
55
56}
57