advice-generator-app basic sass-js async function

Hi Abork 👋. Nice work! I have some suggestions for you:

• For the pattern divider svg when in mobile view, it's better to change the original width, width=250px, to the max-width instead. The reason is that in smaller devices the image overflows to the right. By changing the width to 100%, it makes sure it doesn't overflow, and adding a max-width property will make the width stop increasing on larger devices like tablets. Setting the margin to auto helps center the image when it reaches its max width.

.mobile-img {
    width: 100%;
    max-width: 250px;
    margin: auto;
}

• For the main container, it is better instead of setting the width to 25% to give it a width and max-width property like the above. This way the container doesn't become stretched as the screen width increases.

.main-container {
    width: 100%;
    max-width: 520px;
}

Hope this helps