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;
}
