2つの画像を重ねて画面幅に合わせて同じ比率で縮小させたい

Question

CSS初学者です。
画像にボタン（画像）を重ねて
画面幅に合わせて画像と一緒にボタンも同じ位置でズレる事なく縮小させたいのですが
参考書を見てもいまいち上手くいきません。
どなたかご教示いただけると有り難いです。

エラーメッセージ
画像の下に出ているボタンを画像の上に重ねようとしましたが
それぞれが独立してしまっています。

該当のソースコード

	<div class="wrapper grid">
		<div class="item">
			<img src="images/about/company.png">
			<p><a href="company.html">
				<img src="images/about/btn.png"></a>
			</p>
	　　　　　</div>
	　　　　　<div class="item">
			<img src="images/about/business.png">
			<p><a href="company.html">
				<img src="images/about/btn.png"></a>
			</p>
		</div>
		<div class="item">
			<img src="images/about/recruit.png">
			<p><a href="company.html">
				<img src="images/about/btn.png"></a>
			</p>
		</div>
	</div>
</section>

	max-width: 1920px;
}
.grid {
	display: grid;
	gap: 26px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	margin-bottom: 50px;
	text-align: center;
}
.grid a:hover {
	opacity: 0.5;
}

試したこと

margin-topを-pxでボタンに記述してみましたが
画面幅を変えるとズレてしまいます。

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[meg_]

「コードの挿入」で記入してください。
画面イメージも掲載出来ないでしょうか？

[oteyawarakani22]

失礼いたしました。修正、追加いたしました。

Answer 1

下記のCSSを追加すればどうでしょうか。

.item > img {
  width: 100%;
}
.item p img {
  width: 70%; /* 適宜調整してください */
  margin-top: -15%; /* 適宜調整してください */
}

Comments

[oteyawarakani22]

度々有難うございます。
微調整で意図したものになりました！
有難うございました。