/* Global reset */
* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

/* Set body styles */
body, html {
    height: 100%;
    margin: 0; /* Remove default margin */
    background-size: contain;
}

/* Container for the images */
.image-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto; /* Full viewport height */
    overflow: auto; /* Allow scrolling if content overflows */
}

/* Individual image styles */
.image-container img {
    max-width: 100%;
    height: auto;
    margin-bottom: 5px; /* Space between images */
    object-fit: contain; /* Ensure the entire image is visible */
}

/* Media query for desktop sizes */
@media (min-width: 1024px) {
    .image-container {
        flex-direction: row; /* Change to row layout on larger screens */
        flex-wrap: wrap; /* Allow wrapping of images */
    }
    .image-container img {
        max-width: 45%; /* Adjust the max-width for desktop */
        margin: 5px; /* Increase space between images */
    }
}