画像リンク内の画像サイズが変更できない。

前提

HTML,CSSで模写コーディングをしています。

実現したいこと

画像サイズの変更をしたい。

発生している問題・エラーメッセージ

HTML23行目のmagazine-item内の画像リンクの画像サイズを変更しようとしたが、widthもheightも効かない。
CSS内では50行目で.item　imgと指定しサイズの変更を行おうと試みた。

該当のソースコード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>ページタイトル</title>
    <link rel="stylesheet" href="css/stylesheets.css">
    <link rel="shortcut icon" href="img/favicon.ico">
</head>
<body>
	 <header id=header><!-- ヘッダー -->
	 	<img class=logo src=img/logo.svg alt=ロゴ><!-- ロゴ -->
	 </header>

	 <main><!-- メイン -->
	 	<section class=wrapper id=Aspecial><!-- A special, long article in a newspaper or magazine -->
		 	<h1>A special, long article in a newspaper or magazine</h1><!-- A special, long article in a newspaper or magazineタイトル -->
		 	<p><!-- A special, long article in a newspaper or magazineテキスト -->
		 		テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
		 		<br>
				テキストテキストテキストテキストテキストテキストテキストテキスト
			</p>
			<div class=flex id=magazine-item>
				<a class=item href=#><!-- Achiveリンク -->
					<img src=img/magazine-archive.jpg alt=magazine-archive><!-- Achive画像部分 -->
					<div class=text><!-- Achive文字部分 -->
						<p class=text-title>Achive</p>
						<p>
							テキストテキストテキストテキスト
							<br>
							テキストテキストテキスト
						</p>
					</div>
				</a>
				<a class=item href=#><!-- Newリンク -->
					<img src=img/magazine-new.jpg alt=magazine-new><!-- New画像部分 -->
					<div class=text><!-- New文字部分 -->
						<p class=text-title>New</p>
						<p>
							テキストテキストテキストテキスト
							<br>
							テキストテキストテキスト
						</p>
					</div>
				</a>
			</div>
		</section>

		<section class=wrapper id=Fashion&Style><!-- Fasion & Style -->
			<h1>Fashion & Style</h1><!-- Fasion & Styleタイトル -->
			<p><!-- Fasion & Styleテキスト -->
			 	テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
			 	<br>
				テキストテキストテキストテキストテキストテキストテキストテキスト
			</p>
			<button class=ReadMorebutton type=button><a href=#>Read More</a></button><!-- Read Moreボタンリンク -->
			<img src=img/fasion.jpg alt=Fasion&Styleimage><!-- Fasion & Styleの画像 -->
		</section>

		<section class=wrapper id=Catalog><!-- Catalog -->
			<div class=flex><!-- Catalogの画像左、タイトルテキスト右 -->
				<img src=img/catalog.jpg alt=Catalogimage><!-- Catalogの画像 -->
				<div class=flex-titletext><!-- Catalogのタイトルとテキストまとめ -->
					<h1>Catalog</h1><!-- Catalogタイトル -->
					<p><!-- Catalogテキスト -->
	              	テキストテキストテキストテキストテキストテキストテキストテキストテキ
	              	ストテキスト テキストテキストテキストテキストテキストテキストテキストテ
	              	キスト テキストテキストテキストテキストテキストテキストテキストテキスト
	              	テキスト
					</p>
					<p>
	              	テキストテキストテキストテキストテキストテキストテキストテキストテキ
	              	ストテキスト テキストテキストテキストテキストテキストテキストテキストテ
	              	キスト テキストテキストテキストテキストテキストテキストテキストテキスト
	              	テキスト
					</p>
					<p>
	              	テキストテキストテキストテキストテキストテキストテキストテキストテキ
	              	ストテキスト テキストテキストテキストテキストテキストテキストテキストテ
	              	キスト テキストテキストテキストテキストテキストテキストテキストテキスト
	              	テキスト
					</p>
				</div>
			</div>
		</section>

		<section class=wrapper id=Antique><!-- Antiue -->
			<div class=flex><!-- Antiqueのタイトルテキスト左、画像右 -->
				<div class=flex-titletext>
					<h1>Antique</h1><!-- Antiqueタイトル -->
					<p><!-- Antiqueテキスト -->
	              	テキストテキストテキストテキストテキストテキストテキストテキストテキ
	              	ストテキスト テキストテキストテキストテキストテキストテキストテキストテ
	              	キスト テキストテキストテキストテキストテキストテキストテキストテキスト
	              	テキスト
					</p>
					<p>
	              	テキストテキストテキストテキストテキストテキストテキストテキストテキ
	              	ストテキスト テキストテキストテキストテキストテキストテキストテキストテ
	              	キスト テキストテキストテキストテキストテキストテキストテキストテキスト
	              	テキスト
					</p>
					<button class=ReadMorebutton type=button><a href=#>Read More</a></button><!-- Read Moreボタンリンク -->
				</div>
				<img src=img/antique.jpg alt=Antipueimage><!-- Anticueの画像 -->
			</div>


	 </main>

	 <footer id=footer><!-- フッター -->
	 	<div class=flex id=footer-black><!-- フッター背景黒 -->
	 		<img class=logo src=img/logo.svg><!-- ロゴ -->
	 		<diV class=flex-titletext-footer> <!-- footerのタイトルとテキスト、リストの方 -->
	 			<h2>タイトル</h2>
	 			<ul>
	 				<li>::before"テキストテキストテキスト"</li>
	 				<li>::before"テキストテキストテキスト"</li>
	 				<li>::before"テキストテキストテキスト"</li>
	 				<li>::before"テキストテキストテキスト"</li>
	 				<li>::before"テキストテキストテキスト"</li>
	 			</ul>
	 		</diV>
	 		<div class=flex-titletext-footer><!-- footerのタイトルとテキスト -->
	 			<h2>タイトル</h2>
	 			<p>
	            テキストテキストテキストテキストテキストテキストテキス
	            トテキストテキストテキストテキストテキストテキストテキ
	            ストテキストテキストテキストテキストテキストテキストテ
	            キストテキストテキストテキストテキストテキストテキスト
	        	</p>
	        </div>
	    </div>
	    <div id=footer-white><!-- フッター背景白 -->
	    	<p>© Mag88</p>
	    </div>
	</footer>

	          



	 
</body>
</html>

CSS

@charset "UTF-8";

html {
	font-size: 100%;
}
body {
	font-family: "Arial", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", "sans-serif";
	font-size: 0.875rem;
	color: #2a2a2a;
	width:100%;
	margin:0;
}
.flex{
	display:flex;
	justify-content:space-between;
}
/*ラッパー、ヘッダー以外1200px,padding5%入れる*/
.wrapper{
	max-width:1200px; 
	margin: 0 auto;　			
  	padding: 0 5%;
}
/*後回し、フッター黒背景*/
#footer-black{
	max-width:1200px;
}
/*----------
			ヘッダー
					----------*/
header{
	height:100vh;
	background-image:url("../img/mainvisual.jpg");
	background-size:cover;
	background-position:center top;
	background-repeat: no-repeat;
	position:relative;
	margin-bottom:80px;
}
header .logo{
	position:absolute;
	top:30px;
	right:30px;
}
/*----------
			Aspecial
					----------*/
#Aspecial h1,p{
	text-align:center;
}
.item　img{
	
}

.item{
	position:relative;
}

.text{
	position:absolute;
	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
}