.image-container {
    width: 100%; /* Full width of the parent container */
    /* max-width: 600px;  */
    max-height: 600px; /* Fixed height */
    overflow: hidden; /* Hide any overflow */
    position: relative; /* To contain positioned children */
    border: 1px solid #ccc; /* Optional: Add a border for clarity */
    background-color: #f5f5f5; /* Optional: Add a background color */
}

.responsive-image {
    width: 100%; /* Make the image span the full width */
    height: 100%; /* Make the image span the full height */
    object-fit: cover; /* Scale the image to cover the container, maintaining aspect ratio */
    object-position: center; /* Center the image in the container */
    display: block; /* Remove any inline spacing issues */
}


@media (max-width: 768px) {
    .image-container {
        height: 200px; /* Reduce height for smaller screens */
    }
}