I am working on a project where I need to replicate a design provided by our designer (see the first image). I am currently using a CSS grid to display rhombus-shaped SVG files, but I am having trouble filling the edges with the rhombuses. My current progress is shown in the second and third images, but as you can see, the edges are not filled properly.
Design Images

Current Implementation:
Current Implementation:

I used a CSS grid layout to try and achieve the desired design. Here’s my code:
HTML:

<div class="rhombus-grid">
    <img src="images/rhombus_red.svg" alt="Red">
    <img src="images/rhombus_red.svg" alt="Red">
    <img src="images/rhombus_red.svg" alt="Red">
    <img src="images/rhombus_red.svg" alt="Red">
    <img src="images/rhombus_red.svg" alt="Red">
    <img src="images/rhombus_red.svg" alt="Red">
    <img src="images/rhombus_red.svg" alt="Red">
    <img src="images/rhombus_red.svg" alt="Red">
    <img src="images/rhombus_red.svg" alt="Red">
    <img src="images/rhombus_red.svg" alt="Red">
    <img src="images/rhombus_red.svg" alt="Red">
    <img src="images/rhombus_green.svg" alt="Green">
    <img src="images/rhombus_green.svg" alt="Green">
    <img src="images/icon.svg" alt="Icon">
    <img src="images/rhombus_green.svg" alt="Green">
    <img src="images/rhombus_green.svg" alt="Green">
    <img src="images/rhombus_green.svg" alt="Green">
    <img src="images/farm.svg" alt="Farm">
    <img src="images/villages.svg" alt="Villages">
    <img src="images/animals.svg" alt="Animals">
    <img src="images/buildings.svg" alt="Buildings" data-bs-toggle="modal" data-bs-target="#special_buildings">
    <img src="images/rhombus_green.svg" alt="Green">
    <img src="images/churches.svg" alt="Churches">
    <img src="images/local_products.svg" alt="Local Products" data-bs-toggle="modal" data-bs-target="#local_products">
    <img src="images/gardens.svg" alt="Gardens">
    <img src="images/water_management.svg" alt="Water Management">
    <img src="images/roads_dikes_bridges.svg" alt="Roads, Dikes, and Bridges">
    <img src="images/rhombus_yellow.svg" alt="Yellow">
    <img src="images/world_heritage.svg" alt="World Heritage" data-bs-toggle="modal" data-bs-target="#world_heritage">
    <img src="images/dutch_water_lines.svg" alt="Dutch Water Lines">
    <img src="images/historical_figures.svg" alt="Historical Figures" data-bs-toggle="modal" data-bs-target="#historical_figures">
    <img src="images/beemster_colors.svg" alt="Beemster Colors">
    <img src="images/rhombus_yellow.svg" alt="Yellow">
    <img src="images/rhombus_yellow.svg" alt="Yellow">
    <img src="images/rhombus_yellow.svg" alt="Yellow">
    <img src="images/rhombus_yellow.svg" alt="Yellow">
    <img src="images/rhombus_yellow.svg" alt="Yellow">
    <img src="images/rhombus_yellow.svg" alt="Yellow">
    <img src="images/rhombus_blue.svg" alt="Blue">
    <img src="images/rhombus_blue.svg" alt="Blue">
    <img src="images/beemster_self_explanatory.svg" alt="Beemster Self Explanatory">
    <img src="images/visit_beemster.svg" alt="Visit Beemster">
    <img src="images/rhombus_blue.svg" alt="Blue">
    <img src="images/rhombus_blue.svg" alt="Blue">
    <img src="images/rhombus_blue.svg" alt="Blue">
    <img src="images/rhombus_blue.svg" alt="Blue">
    <img src="images/rhombus_blue.svg" alt="Blue">
    <img src="images/rhombus_blue.svg" alt="Blue">
    <img src="images/rhombus_blue.svg" alt="Blue">
</div>

CSS:

body {
    font-family: Arial, sans-serif;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
}

.rhombus-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 15px;
    justify-content: center;
    align-items: center;
    width: 100vw;
    min-height: 100vh;
}

.rhombus-grid img {
    grid-column: span 2;
    max-width: 100%;
    margin-bottom: -52%;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    transform: scale(1);
}

.rhombus-grid img:nth-child(11n+1) {
    grid-column: 2 / span 2;
}

.rhombus-grid img:hover {
    z-index: 2;
    transform: scale(1.1);
}

I expected this code to fill the entire container with rhombuses, including the edges. However, as seen in the images, the edges are not filled properly. Additionally, the layout needs to be mobile-first. How can I adjust my code to ensure the edges are filled properly and maintain responsiveness?

Additional Information:
The SVG files are shaped as rhombuses.
The design is supposed to be mobile-first.
I’ve used CSS Grid for layout and SVGs for the shapes.
Any help or guidance would be greatly appreciated!