Results Summary Component

Hey there! Great job on your work so farI have a few tips to make it even better. 😊

Firstly, I noticed that the sizes aren't consistent with the design. Let's fix that up, shall we? Here's the code snippet with the changes:

.summaryCard {
width: 100%;
max-width: 736px;
height: auto;
max-height: 513px;
display: flex;
}

.summaryCard .summaryResults {
height: 100%;
width: 50%;
}

.summary {
height: 100%;
width: 50%;
}

.summaryReactionItem,
.summaryMemoryItem,
.summaryVerbalItem,
.summaryVisualItem {
margin-top: 2rem;
}

.continueBtn {
width: 100%;
}

Secondly, it would be helpful to add a cursor pointer when hovering over the button to let the user know that it's clickable. You can achieve this by adding the following code:

button.continueBtn {
cursor: pointer;
}

Thirdly, to improve accessibility, it's best to wrap your card in a main tag instead of a div tag.

Lastly, I recommend using graphic software like Photoshop to get accurate sizes and colors from the picture. Overall, your solution is great, and I encourage you to keep up the good work! 😃