How to Ensure Uniform Product Card Layout with Min-Height and Responsive Design?

I am working on a product card layout for a shopping page. The page will display cards in a grid with multiple rows and columns. My goal is to ensure all product cards look uniform and balanced, regardless of their content length. Here's what I want to achieve:

1- The image container should take 65% of the height of the parent container.

2- The content container should take 35% of the height of the parent container.

3- All cards should have the same height by setting a min-height on the parent container.

4- The layout should be responsive with two columns on mobile screens.

The Problem:

I am encountering the following issues:

1- When I use flex: 0 0 65% for the image container and flex: 0 0 35% for the content container, the image container's size doesn't default to 65% of the parent container as expected.

2- If I add content (e.g., lorem * 35) in the image container, its size increases because of the content but not because of the image container's size.

3- If I use flex: 1 0 65% for the image container and flex: 0 0 35% for the content container, the image size increases, but the content container's size doesn’t stay at 35%.

<div className="feature-item-img-container limited-item-img-container"><div                className="limited-img-two"                style={{                  backgroundImage: `url("${product.images.secondImage}")`,                }}> <div className="feature-item-btn-container" ><p>Add to cart</p></div></div></div>

.feature-item-img-container {    flex: 1 0 65%; /* Child1 takes 65% of the height, effectively flex-grow 3 */    width: 100%;    min-height: 100%;    display: flex;    flex-direction: column;    justify-content: flex-end;    align-items: center;    cursor: pointer;    background-color: #FFDF00;    position: relative;}.limited-img-two {  flex: 1;  width: 100%;  height: 100%;  object-fit:  cover;  transition: opacity 0.3s ease-in;  background-size: cover; /* Ensure the image covers the entire div */  background-position: center; /* Center the image within the div */  background-repeat: no-repeat; /* Prevent repeating of the image */  /* position: relative; */  display: flex;  flex-direction: column;  justify-content: flex-end;  align-items: center;}.limited-item-details-container {  flex: 1 0  35%;  background-color: aliceblue;}

What I Need Help With:

1- How can I ensure the image container and content container** take up exactly 65% and 35% of the parent container height while respecting min-height?

2- Why does using flex: 1 0 65% for the image container cause the image size to increase, but the content size fails to stay at 35%?

3- What are the best practices developers use today to create uniform product card grids?

4- Are there any recommended resources or free source code websites where I can find reusable components for product card grids?