.project-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 40px;
}

.project-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: grayscale(100%);
}

.project-images img:hover {
    filter: none;
    transition: 1s;
}

.image {
    cursor: pointer;
    height: 400px;
}

.section-title {
    margin-top: 2rem;
    margin-bottom: 2rem;
}


@media only screen and (max-width: 450px) {
    .project-images {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    }
}