Product-preview-card-component-main

Hi, nice solution. In my case applied grid to set equality between the image and contain. 1 fraction to each side (img and product details) .product_card{ background-color: white; max-width: 600px; min-height: 300px; ... display: grid; grid-template-columns: 1fr 1fr; }

So, responsively, it´s only one column and two rows with 1 fraction of the container @media screen and (max-width: 800px){ .product_card{ ... grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }