.image-container {
    /*
        Original .image-container has:
        display: flex;
        flex-direction: column;
        justify-content: center; (centers vertically)
        We add align-items to center horizontally IF the image is narrower than the container.
    */
    align-items: center; /* Horizontally center the image within this flex container */
}

.project-image {
    margin-top: 40px;
    /*
        Original .project-image has:
        width: 100%; (good for responsiveness below 400px)
        We add max-width to cap its size.
    */
    max-width: 400px; /* Cap the image width at 400px */
    /* width: 100%; from original CSS will ensure it scales down if container is < 400px */
    /* display: block; from original is fine */
    /* margin: 0 auto; is NOT needed on the image itself if its parent .image-container is handling centering */
}

/*
    Optional: If the .image-container itself should not exceed 400px on smaller screens
    where it might be 100% width and thus wider than the image's max-width.
    This ensures the container doesn't become unnecessarily wide if the image is capped.
*/
@media (max-width: 767.98px) { /* Target screens before the 768px breakpoint */
    .image-container {
        max-width: 400px; /* Also cap the container if the image is capped */
        /* This helps if the image-container was previously width: 100% and the screen was, e.g., 500px wide.
           The image would be 400px, and this would make the container also at most 400px, keeping things tidy.
           The `margin: 0 auto;` on the original .image-container will then center this capped container.
        */
    }
}