:root {
    --bg-color: #eae4da;
}

body,
html {
    height: 100%;
    overflow-x: hidden;
}

body {
    background-color: var(--bg-color);
    font-family: Arial, Helvetica, sans-serif;
}

.container {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 250px;
    gap: 10px;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

img:nth-of-type(5n),
img:nth-of-type(5n + 3),
img:nth-of-type(5n + 5) {
    grid-row-end: span 4;
    background-color: red;
}

img:nth-of-type(3n),
img:nth-of-type(3n + 5),
img:nth-of-type(3n + 11) {
    grid-row-end: span 3;
    background-color: blue;
}

img:nth-of-type(3n + 1),
img:nth-of-type(3n + 7),
img:nth-of-type(3n + 13) {
    grid-row-end: span 2;
    background-color: green;
}

img:nth-of-type(3n + 3),
img:nth-of-type(3n + 9),
img:nth-of-type(3n + 17) {
    grid-row-end: span 1;
    background-color: yellow;
}

@media (max-width: 478px) {
    .container {
        grid-template-columns: repeat(2, 1fr);
    }
}