Order summary component with Flexbox and Grid

👾Hello @zerescas, congratulations on completing this challenge!

Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:

To make your solution even better and more responsive, you can create a media query to break the elements in the pricing section after width: 350px and make every content in a different row, saving space for low resolution devices.

.selected-plan-container {
    display: flex;
    gap: 0em 1.15em;
    grid-template-columns: 3em auto 1fr;
    grid-template-rows: 1fr 1fr;
    background-color: var(--light-pale-blue);
    padding: 1.5em;
    border-radius: 0.8em;
    margin-bottom: 2.1em;
    flex-direction: column;
    align-items: center;
}
}

✌️ I hope this helps you and happy coding!

Hey Aleksandr I saw your code and its pretty neat and really clean.

But at the footer section you used two div, one with class of top-left-decoration and bottom-right-decoration, instead of that you can use pseudo elements :before and :after, these elements are mostly used for decorative purpose and it helps write less html.

Happy Coding!