how do I make an image ocupy the entire grid tile - css

Question

**[![model image][1]][1]
[1]: https://i.stack.imgur.com/0PfBI.jpg
Here, is my code, I don´t know how to make them look like in the image, I tried with the templates. but it´s in vain, I don't know how to do it. I tried changing the sizes, nothing, I'm stuck
thank you for your help, btw
.heromain-imgs {
display: grid;
grid-gap: 0;
grid-template-columns: 30% % 10% 12% 12% 12% 12% 12%;
grid-template-rows: repeat(3, 1fr)
}
.picture {
width: 100%;
height: 100%;
position: relative;
}
.picasia {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 4;
}
/* Picture of Asia */
.picture img {
width: 100%;
max-height: 100%;
}
.picture p {
position: absolute;
color: red;
z-index: 10;
left: 50%;
top: 50%;
}
/* */
.picsuda {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 4;
}
.picafrica {
grid-column-start: 7;
grid-column-end: 8;
grid-row-start: 2;
grid-row-end: 3;
}**
enter image description here