CSS Grid image and column issue in Chrome - html

Question

In Chrome, my site is breaking on desktop and mobile.
Issues:
The second section isn't displaying the hero image correctly. The image should have two halves that when hovered, join together.
Hero images jump to the top of the page with only half of the image in view.
When I went to inspect the page, I saw the following in the console
[Deprecation] Percentages row tracks and gutters for indefinite height grid containers will be resolved against the intrinsic height instead of being treated as auto and zero respectively
I looked into it and came to find the fix for the said issue was to change percentages in grid-template-rows or grid-auto-rows to auto.
I applied the given fix and the issue still persisted. It only breaks in Google Chrome. The site looks fine in Firefox.
Here's the code.
HTML:
<section class="page">
<div class="details">
<h1>Skyline KPGC110</h1>
<h2>1973</h2>
</div>
<div class="hero">
<a href="./kenmeri.html">
<img class="model-left" src="./images/front-1.png" alt="model">
<img class="model-right" src="./images/front-2.png" alt="model">
</a>
</div>
</section>
<!-- ------------------------------ Seciton 2 ------------------------------ -->
<section class="page about">
<div class="details">
<h1>Skyline PGC10</h1>
<h2>1969</h2>
</div>
<div class="hero">
<a href="./pgc10.html">
<img class="model-left" src="./images/gtr-left.png" alt="chef">
<img class="model-right" src="./images/gtr-right.png" alt="chef">
</a>
</div>
</section>
<!-- ------------------------------ Section 3 ------------------------------ -->
<section class="page reel">
<div class="details">
<h1>Fairlady 240z</h1>
<h2>1973</h2>
</div>
<div class="hero">
<a href="./fairladyz.html">
<img class="model-left" src="./images/240z-left.jpg" alt="model">
<img class="model-right" src="./images/240z-right.jpg" alt="model">
</a>
</div>
</section>
Desktop view:
.page {
display: grid;
grid-template-columns: 5% 1fr 1fr 1fr 5%;
min-height: 90vh;
}
.about,
.reel {
position: absolute;
bottom: 0%;
left: 0%;
width: 100%;
opacity: 0;
pointer-events: none;
}
.hero {
display: flex; /* gets rid of gap between imgs */
align-self: center;
justify-self: center;
height: 500px;
overflow: hidden;
}
.hero a {
display: flex; /* removes seperation created by a tag */
}
.hero img {
height: 500px;
transition: transform 0.3s ease-out;
cursor: pointer;
}
Breakpoint 1(Laptop):
#media screen and (max-width: 1024px) {
.page {
grid-template-columns: 5% 1fr 5%;
grid-template-rows: 2fr 1fr;
align-items: center;
}
.hero {
height: auto;
grid-column: 2;
}
.hero img {
height: 425px;
}
}
Breakpoint 2(Mobile):
#media screen and (max-width: 768px) {
.page {
grid-template-rows: 1fr;
}
.page-1 h3 {
font-size: 1.125rem;
padding-right: 20px;
}
.hero img {
width: auto;
}
.details h2 {
font-size: 28px;
}
}
The link to the repo is here if you want to get a full look at the code.

Answer 1

In your code,
img {
display: block;
width: 100%;
height: 100%;
}
just remove the width: 100% and it will work fine.