Stats preview card component

Hey first of all great work. And I hope I can help you with your problem.

to get an even split i changed your css like this:

i added a min-height of 500px to the body and the card it is just for responsivenes not for the even split

`body { background-color: var(--primary-background); height: 100vh; min-height: 500px; font-size: 15px; font-family: "Inter"; display: flex; justify-content: center; align-items: center; }

.card { max-width: 1440px; width: 90%; height: 500px; max-height: 80%; display: grid; grid-template-columns: 50% 50%; /// I used grid on the card and created two columns 1 for the text and one for the image

grid-template-rows: 100%; justify-content: center; align-items: center; background-color: var(--primary-card-background); border-radius: 8px; }

.info { display: grid; // also used grid to align the text i think you have more control than using margins or paddings

width: 90%; height: 90%; //////////// to give the text a distance to the card container, i set the width and height to 90% instead of 100% and centered the info container justify-self: center; // }

then i also worked on the image to make it more responsive and added the purple layer

figure { width: 100%; height: 100%; position: relative; this is important for the purple layer } figure img{ width: 100%; height: 100%; border-top-right-radius: 8px; border-bottom-right-radius: 8px; }

// this is your purple layer i used the css after pseudo class and positioned the layer absolute to the figure element

figure::after{ content: ''; position: absolute; left: 0; background-color: #4f2a67a6; width: 100%; height: 100%; border-top-right-radius: 8px; border-bottom-right-radius: 8px; }