/* Ensure that the image scales with the parent container */
.responsive-img {
    width: 100%;

    max-width: 100%; /* Prevents image from exceeding its original size */
    display: block;
    object-fit: contain; /* Maintain aspect ratio and fit within the div */
    display: block;

    height: auto;
    object-fit: contain; /* Ensure the image fits and maintains aspect ratio */
    display: block;
}
.fit-img {
    width: 100%;
    height: auto;
    object-fit: contain; /* Ensure the image fits and maintains aspect ratio */
    display: block;
}

/* Optional: Style for the image container */
.image-container {
    width: 100%; /* Full-width container */
    max-width: 1200px; /* Limit the maximum width of the container */
    margin: 0 auto; /* Center the container */
}


/* Responsive adjustments */
@media (max-width: 1200px) {
    .image-container {
        max-width: 90%;
    }
}

@media (max-width: 768px) {
    .image-container {
        max-width: 95%;
    }
}

@media (max-width: 480px) {
    .image-container {
        max-width: 100%;
    }
}