Hello
The image still very large and I dont know why
Your code so far
/* file: index.html */
<section id="work">
<h2>These are some of my projects</h2>
<div id="projects-grid">
<a href="https://codepen.io/freeCodeCamp/full/zNqgVx" class="project-link " target="_blank"><img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg" alt="project" class="project-img"><p>
<span><code><</code></span> Tribute Page <span><code></code>/></span>
</p></a>
<a href="https://codepen.io/freeCodeCamp/full/qRZeGZ" class="project-link" target="_blank"><img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png" alt="project" class="project-img"> <p>
<span><code><</code></span> Random Quote Machine <span><code>/></code></span>
</p></a>
<a href="https://codepen.io/freeCodeCamp/full/wgGVVX" class="project-link" target="_blank"><img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png" alt="project" class="project-img"><p>
<span><code><</code></span> JavaScript Calculator <span><code>/></code></span>
</p></a>
<a href="https://codepen.io/freeCodeCamp/full/mVEJag" class="project-link" target="_blank"><img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/map.jpg" alt="project" class="project-img"><p>
<span><code><</code></span> Map Data Across the Globe <span><code>/></code></span>
</p></a>
<a href="https://codepen.io/freeCodeCamp/full/wGqEga" class="project-link" target="_blank"><img src=" https://cdn.freecodecamp.org/testable-projects-fcc/images/wiki.png" alt="project" class="project-img"> <p>
<span><code><</code></span> Wikipedia Viewer <span><code>/></code></span>
</p></a>
<a href="https://codepen.io/freeCodeCamp/full/KzXQgy" class="project-link" target="_blank"><img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tic-tac-toe.png" alt="project" class="project-img"> <p>
<span><code><</code></span> Tic Tac Toe Game <span><code>/></code></span>
</p></a>
</div>
<a href="https://codepen.io/FreeCodeCamp/" id="show-more-btn" target="_blank"></a>
</section>
```css
/* file: styles.css */
#work{
background-color: var(--main-blue);
height: 100vh;
padding: 6rem 2rem;
}
h2{
font-size: 2.5rem;
border-bottom: solid 2px var(--main-white);
color: var(--main-white);
font-weight: 300;
max-width: 640px;
margin:0 auto 6rem auto ;
text-align: center;
}
.project-link{
background-color: var(--main-gray);
-webkit-border-radius:2px;
-moz-border-radius:2px;
-o-border-radius:2px;
border-radius:2px;
box-shadow: 1px 1px 2px rgb(0 0 0 / 50%);
}
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 4rem;
width: 100%;
max-width: 1280px;
margin: 0 auto;
margin-bottom: 6rem;
}
.project-title {
font-size: 2rem;
padding: 2rem 0.5rem;
}
.project-img{
height: calc(100% - 6.8rem);
width: 100%;
object-fit: cover;
}
**Your browser information:**
User Agent is: <code>Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36</code>
**Challenge:** Learn Responsive Web Design by Building a Piano - Step 1
**Link to the challenge:**
https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-responsive-web-design-by-building-a-piano/step-1