/* ... Previous CSS code ... */

.image-container {
    max-width: 100%;
    max-height: 100%;
    /*margin: 20px 0;*/
}

.image-container img {
    width: 100%;
    height: 100%;
    display: block;
}

/* ... Remaining CSS code ... */

/* Your default styles for the image */
.image {
    max-height: 100vh; /* Default size for larger screens */
    max-width: 100%;
    /*max-height: 100%;  Adjust the max height as needed */
    width: 100%;
    height: 100vh;
    display: block;
    margin: 20px 0;
}

@media (max-width: 768px) {
    .image {
        max-height: 50vh; /* Adjust size for smaller screens */
    }
}