ul {
    list-style: none;
}

/* Responsive image gallery rules begin*/

.image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.image-gallery>li {
    flex: 1 1 auto;
    /* or flex: auto; */
    cursor: pointer;
    position: relative;

    transition: var(--transition);
}

.image-gallery::after {
    content: "";
    flex-grow: 999;
}

.image-gallery li img {
    object-fit: cover;
    width: 100%;
    height: 320px;
    vertical-align: middle;
}

#projects .image-gallery li img {
    object-fit: cover;
    width: 100%;
    height: 240px;
    vertical-align: middle;
}

#portfolio .image-gallery > li img{
    transition: var(--transition);
}

#portfolio .image-gallery > li img:hover{
    transform: scale(0.9);
}