Product preview card component (use only HTML & CSS)

Using relative units in image size and border-radius size can help ensure that your design remains responsive and adapts well to different screen sizes and devices.

For image size, it's recommended to use percentage values (e.g. width: 100%;) or viewport units (e.g. width: 50vw;) instead of fixed pixel values. This allows the image to scale proportionally to its container and adapt to different screen sizes without distorting or overflowing.

For border-radius size, it's also recommended to use relative units such as em or percentage values (e.g. border-radius: 50%;) instead of fixed pixel values. This allows the border-radius to scale proportionally with the element it's applied to, ensuring that it looks consistent and visually pleasing across different screen sizes and devices.

Definitely Using relative units in image size and border-radius helps your design remain responsive on any sceen sizes