Single_Price_Gride_Component

Hey, Congratulations on completing the challenge! It looks very good, with the higher border-radius even better than the design in my eyes.

One thing you could improve is using the min() and max() css functions to implement responsiveness. Here is an example:

Instead of writing:

.box{
    width: 45%;       
}

@media screen and (max-width:575px){ 
    .box{
        width: 80%;                       
    }
}

You can use the min() function, like so:

.box{
    width: min(750px, 80%);      
}

This just says that it will use the value, that is smaller. That means, if 80% of the screen width are smaller than 750px, the 80% will be used and vice versa. There will be a quite different behaviour than the one now visible, but it is also removing the "jump" from 45% to 80%.

Try it out, it can really help and will clean up your css code!