Responsive product preview card

Hey Jonathan Samael, Good Job ! your solution works fine but there are some improvement which could be made

1. For aligning the whole content to the center of the screen you should not use body .white-box{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} instead try this body{min-height: 100vh; display: flex; align-items: center; justify-content: center;} and for now remove .scratch-price{position: absolute; right: 6.5%; bottom: 22.5%}.
2. You cannot use width and max-width property at the same time only one is going to work like here in your @media(max-width: 576px){ .white-box{width: 365px; max-width:576px;} }.
3. Avoid giving every item width and height and if you really want use percentage width or max, min-width and height property.
4. For aligning the price don't use position property instead use display: flex and then try to align the items it will work fine.

Hope it helps....