gridを使って、画像の幅を広げたい

前提・実現したいこと

表題の通り、画像をmax-width 700pxの時に画像を広げたいが、できない。
ご教授お願い致します

試したこと

まず、grid-templateのpxを変更させました。

grid-template: 57px 216px 165px/ 427px 188px 655px ;

を
上記のように変更しました。style.cssでも適用されています。→しかし、google toolでは、適用されますが
vscodeでは、反映されないため、質問しました。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4	<title></title>
5	<link href="../css/destyle.css" rel="stylesheet" type="text/css">
6	<link href="../css/style.css" rel="stylesheet" type="text/css">
7</head>
8<body>
9	<section class="room-contents">
10		<div class="contents-inner">
11			<ul class="room-list">
12				<!-- 1 -->
13				<li class="room-item">
14					<div class="room-item-img room-item-left aos-init aos-animate" data-aos="fade-up" data-aos-delay="100"><img alt="お部屋1" src="../asserts/img/oheya01.jpg"></div>
15					<div class="room-item-txt room-item-right aos-init aos-animate" data-aos="fade-up" data-aos-delay="500">
16						<div class="jp-text">
17							<h2 class="ttl">温泉付き客室</h2><!-- /.ttl -->
18							<div class="desc-txt">
19								<p class="desc1">温海の源泉かけ流し露天風呂付き客室になります。<br class="space">
20								あなただけの上質な安らぎのひとときを。</p>
21								<p class="desc2">＊部屋数に限りがございます。<br class="space">
22								<span>＊洗い場はないため、<br class="space">
23								お体を先に大浴場でお流しになって頂く必要があります。</span></p><!-- /.desc2 -->
24							</div><!-- /.desc-txt -->
25						</div><!-- /.jp-text -->
26					</div><!-- /.room-item-right -->
27				</li><!-- /.room-item -->
28			</ul>
29		</div>
30	</section>
31</body>
32</html>

CSS
1
2.room-list {
3  -webkit-box-pack: justify;
4  -webkit-justify-content: space-between;
5      -ms-flex-pack: justify;
6          justify-content: space-between;
7  margin-top: 80px;
8}
9
10@media screen and (min-width: 600px) and (max-width: 1179px) {
11  .room-list {
12    margin: 0px 20px;
13  }
14}
15
16@media screen and (max-width: 700px) {
17  .room-list {
18    display: -webkit-box;
19    display: -webkit-flex;
20    display: -ms-flexbox;
21    display: flex;
22    -webkit-box-orient: vertical;
23    -webkit-box-direction: normal;
24    -webkit-flex-direction: column;
25        -ms-flex-direction: column;
26            flex-direction: column;
27    -webkit-box-align: center;
28    -webkit-align-items: center;
29        -ms-flex-align: center;
30            align-items: center;
31  }
32}
33
34.room-item {
35  width: 100%;
36  display: -ms-grid;
37  display: grid;
38  -ms-grid-rows: 57px 216px 165px;
39  -ms-grid-columns: 367px 158px 655px;
40      grid-template: 57px 216px 165px/ 367px 158px 655px;
41}
42
43@media screen and (min-width: 600px) and (max-width: 1179px) {
44  .room-item {
45    display: -webkit-box;
46    display: -webkit-flex;
47    display: -ms-flexbox;
48    display: flex;
49    -webkit-box-orient: vertical;
50    -webkit-box-direction: normal;
51    -webkit-flex-direction: column;
52        -ms-flex-direction: column;
53            flex-direction: column;
54  }
55}
56
57@media screen and (max-width: 700px) {
58  .room-item {
59    display: -ms-grid;
60    display: grid;
61    -ms-grid-rows: 57px 216px 165px;
62    -ms-grid-columns: 427px 188px 655px;
63        grid-template: 57px 216px 165px/ 427px 188px 655px;
64    position: static;
65    margin-top: 30px;
66  }
67}
68
69.room-item:nth-of-type(2) {
70  margin: 84px auto;
71  display: -ms-grid;
72  display: grid;
73  -ms-grid-rows: 57px 243px 138px;
74  -ms-grid-columns: 654px 159px 430px;
75      grid-template: 57px 243px 138px/ 654px 159px 430px;
76}
77
78@media screen and (min-width: 600px) and (max-width: 1179px) {
79  .room-item:nth-of-type(2) {
80    display: -webkit-box;
81    display: -webkit-flex;
82    display: -ms-flexbox;
83    display: flex;
84    -webkit-box-orient: vertical;
85    -webkit-box-direction: normal;
86    -webkit-flex-direction: column;
87        -ms-flex-direction: column;
88            flex-direction: column;
89  }
90}
91
92@media screen and (max-width: 700px) {
93  .room-item:nth-of-type(2) {
94    display: -ms-grid;
95    display: grid;
96    -ms-grid-rows: 57px 243px 165px;
97    -ms-grid-columns: 367px 158px 655px;
98        grid-template: 57px 243px 165px/ 367px 158px 655px;
99    position: static;
100    margin-bottom: 30px;
101  }
102}
103
104.room-item:nth-of-type(3) {
105  margin-bottom: 150px;
106}
107
108.room-item-right {
109  -ms-grid-column: 2;
110  -ms-grid-column-span: 3;
111  grid-column: 2 / 5;
112  -ms-grid-row: 2;
113  -ms-grid-row-span: 2;
114  grid-row: 2 / 4;
115  padding-left: 150px;
116  /* 左余白 */
117}
118
119@media screen and (min-width: 600px) and (max-width: 1179px) {
120  .room-item-right {
121    padding-left: 0px;
122    margin: 0 auto;
123    text-align: center;
124    width: 100%;
125  }
126}
127
128@media screen and (max-width: 700px) {
129  .room-item-right {
130    -ms-grid-column: 1;
131    -ms-grid-column-span: 1;
132    grid-column: 1 / 2;
133    -ms-grid-row: 2;
134    -ms-grid-row-span: 2;
135    grid-row: 2 / 4;
136    text-align: inherit;
137    padding-left: 50px;
138  }
139}
140
141.room-item-right-sec {
142  -ms-grid-column: 2;
143  -ms-grid-column-span: 3;
144  grid-column: 2 / 5;
145  -ms-grid-row: 1;
146  -ms-grid-row-span: 2;
147  grid-row: 1 / 3;
148  z-index: 9;
149}
150
151@media screen and (max-width: 700px) {
152  .room-item-right-sec {
153    z-index: -4;
154    top: 50%;
155    left: 50%;
156    -webkit-transform: translate(-50%, -50%);
157            transform: translate(-50%, -50%);
158    -ms-grid-column: 1;
159    -ms-grid-column-span: 2;
160    grid-column: 1 / 3;
161    padding-left: 0px;
162  }
163}
164
165.room-item-left {
166  -ms-grid-column: 1;
167  -ms-grid-column-span: 2;
168  grid-column: 1 / 3;
169  -ms-grid-row: 1;
170  -ms-grid-row-span: 2;
171  grid-row: 1/3;
172  z-index: 9;
173}
174
175.room-item-left-sec {
176  -ms-grid-column: 1;
177  -ms-grid-column-span: 2;
178  grid-column: 1 / 3;
179  -ms-grid-row: 2;
180  -ms-grid-row-span: 2;
181  grid-row: 2 / 4;
182  z-index: -1;
183}
184
185@media screen and (min-width: 600px) and (max-width: 1179px) {
186  .room-item-left-sec {
187    padding-left: 0px;
188    margin: 0 auto;
189    text-align: center;
190    width: 100%;
191  }
192}
193
194@media screen and (max-width: 700px) {
195  .room-item-left-sec {
196    padding-left: 0px;
197    text-align: inherit;
198  }
199}
200
201@media screen and (max-width: 700px) {
202  .room-item-left {
203    z-index: -4;
204    top: 50%;
205    left: 50%;
206    -webkit-transform: translate(-50%, -50%);
207            transform: translate(-50%, -50%);
208  }
209}
210
211.room-item-img {
212  width: 90%;
213  /* 画像サイズ指定 */
214}
215
216@media screen and (min-width: 600px) and (max-width: 1179px) {
217  .room-item-img {
218    width: 100%;
219  }
220}
221
222@media screen and (max-width: 700px) {
223  .room-item-img {
224    display: block;
225    width: 95vw;
226    margin: 0 auto;
227  }
228}
229
230@media screen and (max-width: 700px) {
231  .room-item-img > img {
232    opacity: .7;
233    display: block;
234    widows: 100vw;
235  }
236}
237
238.room-item-txt {
239  background-image: url(../../../asserts/img/bg.png);
240  background-position: center;
241  background-size: cover;
242  z-index: 5;
243  -webkit-box-flex: 1;
244  -webkit-flex: 1;
245      -ms-flex: 1;
246          flex: 1;
247}
248
249@media screen and (max-width: 700px) {
250  .room-item-txt {
251    background-image: none;
252  }
253}
254
255.room-item-txt .jp-text {
256  padding-left: 52px;
257  /*  grid-area: right;
258                grid-column: 3/4;
259                grid-row: 2/3; */
260}
261
262@media screen and (max-width: 700px) {
263  .room-item-txt .jp-text {
264    font-weight: bold;
265  }
266}
267
268.room-item-txt .jp-text .ttl {
269  font-size: 2.4rem;
270  padding-top: 60px;
271}
272
273@media screen and (max-width: 700px) {
274  .room-item-txt .jp-text .ttl {
275    font-size: 2.0rem;
276  }
277}
278
279@media screen and (max-width: 500px) {
280  .room-item-txt .jp-text .desc-txt {
281    padding: 0px 10px;
282  }
283}
284
285.room-item-txt .jp-text .desc-txt .desc1, .room-item-txt .jp-text .desc-txt .desc2 {
286  line-height: 1.5;
287  padding-top: 52px;
288  padding-bottom: 52px;
289}
290
291@media screen and (max-width: 700px) {
292  .room-item-txt .jp-text .desc-txt .desc1, .room-item-txt .jp-text .desc-txt .desc2 {
293    padding: 22px;
294    line-height: 1.0;
295    font-size: 1.4rem;
296    font-weight: lighter;
297  }
298}
299
300@media screen and (max-width: 700px) {
301  .room-item-txt .jp-text .desc-txt .desc1 .space, .room-item-txt .jp-text .desc-txt .desc2 .space {
302    display: none;
303  }
304}
305