I made this component using flexbox and custom properties CSS

As far as the background what i did was this: background-repeat: no-repeat;

This should stop the background from looping over and over.

Hey @Starlk 👋🏻

I have some suggestions to help you fix the accessibility and HTML issues.

• In your markup, <section class="card">...</section> should be <main class="card">...</main> and <div class="attribution">...</div> should be <footer class="attribution">...</footer>. These will fix the accessibility issues. Don't forget to generate a new repot once you fix the issues.
• For the music icon, add aria-hidden="true”, because it's for decoration. You can read more about aria-hidden here. Like so:

<img src="/images/icon-music.svg" alt="" class="plan__icon" aria-hidden="true”>

• Hero image should have a display: block;, it removes the line underneath the image. If you want to know what's causing it, check out the 3rd section of this video.
• Next, if you're not using srcset, you should remove it otherwise it's causing some errors.
• Also, I suggest implementing :hover state, which you can find in design folder active-state image, after you implement it you can also add transition: all 0.2s; to the button and the links, this will make :hover smoother.
• Lastly, let's fix the background image and here's how to do it:

body {
    background-image: url("/images/pattern-background-desktop.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #e0e8ff;
    min-height: 100vh;
}

I hope this was helpful 👨🏻‍💻 all in all, you did a nice job, keep it going. Cheers 👾