Result-summary-compound

Hello! Congratulations on completing the challenge. It looks very good, these are some details that I notice can improve.

The <header> element has no function, you could omit it.

The background of the entire page is not completely white, it is something more or less like this background: #eef2fe;, you can add it <section id="result-summary"

You can add these rules to .container, it is no longer necessary to apply a background

.container {
    /* padding: 80px 20px; */
    /* background: #fff; */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

Very well used grid, I added these CSS rules to make the card look good:

.item-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 10px #c8d2ef;
}

It is generally better to manipulate the content from its container, so you can avoid using margin and do something like this in the summary:

.item-container .summary {
    padding: 20px;
    gap: 10px;
    display: flex;
    flex-direction: column;
}

and finally the .atributtion generates a scroll and in this case it is not necessary, unless you want it, I show you a possible solution so that it remains at the bottom and does not scroll:

.attribution {
    font-size: 11px;
    text-align: center;
    position: absolute;
    bottom: 0;
    width: 100%;
}

Very good job, I hope I have helped you, let me know if you have questions. Thank you!