Order Summary Component using grid and media queries

Hello there! Good job with this challenge. Viewing your solution, I think you should considered the following...

• the hover state of the main button into this...

.payment-btn:hover {
  background: hsla(245, 78%, 79%, 1);
  cursor: pointer;
}

• Add the background image in the body rule set like this...

body {
  min-height: 100vh;
  font-size: 16px;
  font-family: "Red Hat Display", sans-serif;
  background-color: var(--pale-blue);
  display: grid;
  place-items: center;
  color: var(--desaturated-blue);
  background-image: url(images/pattern-background-desktop.svg);
  background-repeat: no-repeat;
}

and adjust the image in media queries for mobile

• Wrap the attribution with footer tag

Hope this helps and Keep up the good work!

hey good job on this challenge! wrap everything in your body in <main> OR use semantic tags! if you're using div right after body, then give them a role=""; however, it's a little frowned upon to use role right after body, so try to stick with semantic tags instead. you can read more about landmarks here

here is a list i made of accessibility issues & best practices

hope this helps :))