api call and center item by Grid

Great job on completing the challenge!

Alternatively, you can switch what svgs/imgs to be shown on the screen using media queries. Add the classes to the html element and add another media query break point for desktop. The below is for mobile:

@media screen and (max-width: 374px) {
  .desktop {
    display: none; // hide it
  }
  .mobile {
    display: block; // show it
  }
}

I also recommend disabling :hover on mobile device view. This is the general practice since you can't hover on a mobile device. A code sample below:

@media(hover: hover) {
  button:hover {
    color: hsl(150, 100%, 66%);
    box-shadow: 0px 0px 26px rgba(82, 255, 168, .9);
    padding: 20px;
  }
}
/**Remove hover on mobile screens*/
@media(hover: none) {
  button:hover, button:active {border: 1px solid rgba(82, 255, 168, .9)}
}

Good job 👍, but I have some recommendations!

• Replace whole .divider class with img, you don't need svg here since there's normal image for that https://lack21.github.io/Advice-Generator/images/pattern-divider-desktop.svg and add width: 100% when you replace it.

• Instead of width: 40% in the id #root replace it with width: min(30rem, 90%), like this it will be responsive on desktop and mobile.