Lesson 33 Features Block Images

HTML/CSS
1

Hey y’all, I’m experiencing layout issues in Part 3 Lesson 33.
When I use easy@2x.jpg as the img source, it looks like this. When I just use easy.jpg, I don’t have this issue. Why does easy@2x.jpg mess up my layout so bad?

Screenshot from 2023-05-06 13-38-26
Screenshot from 2023-05-06 13-38-261280×800 147 KB

I double checked the Code Along folder, and everything I’m doing looks right… I even used Mosh’s easy@2x.jpg file instead of the one I created just to eliminate any room for error. Help!

2

Here’s my HTML for that section:

<article class="grid grid--1x2 feature">
  <div>
    <span class="icon-container">
      <svg class="icon icon--primary">
        <use xlink:href="images/sprite.svg#wordpress"></use>
      </svg>
    </span>
    <h3 class="feature__heading">Super Easy to Use</h3>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente
      repudiandae impedit aperiam! Laudantium fuga delectus ab quod optio ea
      inventore quo nobis, commodi, recusandae illo.
    </p>
    <a href="#" class="link-arrow">Learn More</a>
  </div>
  <picture>
    <source
      type="image/webp"
      secset="images/easy.webp 1x, images/easy@2x.webp 2x"
    />
    <source
      type="image/jpg"
      secset="images/easy.jpg 1x, images/easy@2x.jpg 2x"
    />
    <img src="images/easy@2x.jpg" alt="" />
  </picture>
</article>