aspect-ratioだけ効かないのを直したい。

実現したいこと

aspect-ratioだけ効かないのを直したい。

発生している問題・分からないこと

画像を横に2枚並べた状態で画像比率を1:1にしたいのですがaspect-ratioだけ反映してくれません。親要素にaspect-ratioを入れたりしましたが変わりませんでした。ご教授頂けますと幸いです。

該当のソースコード

HTML

1 <main class="wrapper grid"> 2 <div class="item"> 3 <img src="images/WCBCafe/images/menu1.webp"> 4 <p>アボカドトースト</p> 5 </div> 6 <div class="item"> 7 <img src="images/WCBCafe/images/menu2.webp"> 8 <p>生ハムのカプレーゼ</p> 9 </div> 10 <div class="item"> 11 <img src="images/WCBCafe/images/menu3.webp"> 12 <p>ペンネボロネーゼ</p> 13 </div> 14 <div class="item"> 15 <img src="images/WCBCafe/images/menu4.webp"> 16 <p>ルーム貝のワイン蒸し</p> 17 </div> 18 <div class="item"> 19 <img src="images/WCBCafe/images/menu5.webp"> 20 <p>菜葉のグリル</p> 21 </div> 22 <div class="item"> 23 <img src="images/WCBCafe/images/menu6.webp"> 24 <p>ジェノベーゼ</p> 25 </div> 26 <div class="item"> 27 <img src="images/WCBCafe/images/menu7.webp"> 28 <p>ラザニア</p> 29 </div> 30 <div class="item"> 31 <img src="images/WCBCafe/images/menu8.webp"> 32 <p>カプチーノ</p> 33 </div> 34 <div class="item"> 35 <img src="images/WCBCafe/images/menu9.webp"> 36 <p>チョコブラウニー</p> 37 </div> 38 </main>

CSS

1.grid{2 display: grid;3 gap: 2rem 1.5rem;4 grid-template-columns: repeat(2, 1fr);5 text-align: center;6}7.item img{8 object-fit: cover;9 border-radius: 16px;10 aspect-ratio: 1/1;11}12.item p{13 font-size: .875rem;14}

試したこと・調べたこと

上記の詳細・結果

親要素にaspect-ratioを入れたりしましたが変わりませんでした。

補足

特になし