https://www.peaceminusone.com/Exhibition

The website above when resizing has the effect when zooming in and out.Instead of the standard adjust ment, how do i do with the effect with my site? I tried transition and transform but it doesn't do anything. I assume it has something to do with JavaScript? .

My CSS:

.gallery__img {
    width: 100%;
    height: auto;
}

.gallery__img2 {
    width: 100%;
    height: auto;
}

.container {
    width: 100%;
    display: flex;
    justify-content: center;
    transform: wrap 5s;
}

.pic {
    margin-top: 34.6px;
}

.pic p {
    margin-bottom: 35px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.015rem;
    color: white !important;
    margin-top: 12px;
    margin-left: 20px;
    letter-spacing: 0.015em;
}

.pic img:hover {
    filter: grayscale(100%);
    cursor: pointer;
}

@media only screen and (max-width: 1899px) {
    .pic p {
        margin-top: 11px;
        margin-bottom: 35px;
        margin-left: 21px;
        font-size: 11.7px;
    }
}

@media only screen and (max-width: 1729px) {
    .pic p {
        margin-top: 13px;
        margin-bottom: 36px;
        margin-left: 21px;
        font-size: 11.7px;
    }
}

@media only screen and (max-width: 1280px) {
    .pic p {
        margin-bottom: 34px;
    }
    .nav {
        border-bottom-width: 1px;
    }
}

@media (max-width: 1000px) {
    .nav li {
        display: none;
    }
    .toggle-button {
        display: flex;
    }
    .container {
        flex-wrap: wrap;
    }
}