.gallery {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    /* justify-content: row; */
}

.gallery-item {
    height: 50%;
    flex: 0 0 20%;
    /*flex grow cero because we dont want it to get bigger. flex shrink as the browser is getting smaller should it get smalle? no thats why is cero. flex basis is 25%
        as the original size of the page*/
    box-sizing: border-box;
}

.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* align-self: center; */
}

@media screen and (max-width: 768px) {
    .gallery-item {
        flex: 0 0 50%;
        height: 25%;
        /* Adjust for 5 items per row on desktop */
    }
}