.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 10px; /* add spacing so border doesn't stick to edges */
    box-sizing: border-box;
}

.image-container img {
    width: 100%;
    max-width: 700px;
    height: auto;
    /* aspect-ratio: 4 / 1;   */
    /* optional: only if you want consistent shape */
    object-fit: contain;
    display: block;
    border: 3px solid black;
    box-sizing: border-box;
}

/* Optional media query for very small screens */
@media (max-width: 400px) {
    .image-container img {
        max-width: 90vw; /* use viewport width instead of fixed pixels */
    }
}