Order Summary content

Hello!

• I don't think this component needs to bigger on large viewports. You can set a max-width, the same for all viewports.
• Don't set the height for the component, but let it be automatically calculated from the content. You set it to 90vh on mobile, but it isn't sufficient to contain all the elements, the cancel button is overflowing.

On the other hand, both "Proceed to Payment" and "Cancel Order" are buttons, so you could use the <button> tag for them, and use some styling composition with the classes.

First, you could create a base style on a .btn class, set some padding and text-align on it, and a background-color: transparent and use this class on both buttons.

Then set the bright blue background color on a .btn-primary class and use both classes on the "Proceed to Payment" button

Hi @alifs! Awesome job!

Well, one of the issues that I'm seeing with your code is that you set a fixed height on the container, so you don't have space to grow vertically and the image can change size horizontally.

Try not to set a fixed height and allow the content to set it, play with the padding and margin to get the result that you want.