utilice HTML y CSS base.

Hi Benjamin, congratulations for your solution!

I saw your code and I have some recommends for you!

1. It is customary to use style.css for main stylesheet , So it's better to use style.css instead of index.css.
2. It's not necessary to use same codes for responsivity! for responsive design just change the variable property . for example: if your width in desktop is same with mobile just skip it! and remember that always style desktop at the first!
3. about your HTML , containerQr & containerImg & containerParrafos aren't important. for example : HTML :

  <div class="mainContainer">
        <img src="images/image-qr-code.png" alt="Qr">
        <h1>Improve your front-end skills by building projects</h1>
        <p> Scan the QR code to visit 
          Frontend Mentor and take your 
          coding skills to the next level</p>
  </div>   

and your CSS :

    body {
        background-color:var(--Lightgray);
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-size: 10px;
        font-weight: 700;
        font-family:'Outfit', sans-serif;
        text-align: center;
        color: var(--Darkblue);
    }
    .mainContainer{
        background-color: var(--White);
        border-radius: 12px;
        display: flex;
        align-items: center;
        flex-direction: column;
        width: 300px;
        height: 480px;
    }

Hope it helps you! Wish you the best.

Congrats on your first project on frontend mentor, Benjamin.

The html seems good to me, the css on the other hand is not.

@media queries are meant to add changes for different viewports, they don't interfere with the browser's access to the lines above or below it, that's why you don't need to include the whole styling of your website within every media query (:root variables can stay outside, on the top of your css file, unless they are meant to add changes for smaller or larger screens).

To learn more about stlying responsive websites, I suggest you start with the following youtube video: https://www.youtube.com/watch?v=VQraviuwbzU

Good luck!

I think the HTML is fine! Good work.

Seems like the font-weight for the description is off. Other than that it looks good!

If you wished to work further on it, you could add some responsiveness by making the width of the card have a max-width and a min-width, and have the width be 100%, so it stretched a bit depending of the phone's screen width.

{
    min-width: 200px;
    width: 100%;
    max-width: 300px;
}

A similar approach would be to instead use clamp, to clamp the width between a set of values:

{
    width: clamp(200px, 100%, 300px);
}

To make these changes effective you'd need to make some adjustments on the padding of the card, among other things.