/* style.css */
.image-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
}

.full-width-img {
    flex: 1 0 100%; /* flex-grow | flex-shrink | flex-basis */
    max-width: 100%; /* change as needed */
    margin: 0.0%; /* change as needed */
    box-sizing: border-box;
}

.half-width-img {
    flex: 1 0 50%; /* flex-grow | flex-shrink | flex-basis */
    max-width: 50%; /* change as needed */
    margin: 0.0%; /* change as needed */
    box-sizing: border-box;
}

.third-width-img {
    flex: 1 0 33%; /* flex-grow | flex-shrink | flex-basis */
    max-width: 33%; /* change as needed */
    margin: 0.0%; /* change as needed */
    box-sizing: border-box;
}

.spike-width-img {
    flex: 1 0 30%; /* flex-grow | flex-shrink | flex-basis */
    max-width: 30%; /* change as needed */
    margin: 0.0%; /* change as needed */
    box-sizing: border-box;
}

.fourth-width-img {
    flex: 1 0 25%; /* flex-grow | flex-shrink | flex-basis */
    max-width: 25%; /* change as needed */
    margin: 0.0%; /* change as needed */
    box-sizing: border-box;
}

.hex-width-img {
    flex: 1 0 12%; /* flex-grow | flex-shrink | flex-basis */
    max-width: 12%; /* change as needed */
    margin: 0.0%; /* change as needed */
    box-sizing: border-box;
}
/* .fifth-width-img img {
    max-height: 100px; 
    width: auto; 
    height: auto; 
} */

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

.spacer {
    flex: 1 0 20%; 
    max-width: 20%; 
    box-sizing: border-box;
}
.smallspacer {
    flex: 1 0 6%; 
    max-width: 6%; 
    box-sizing: border-box;
}

.image-title {
    text-align: center;
    margin-bottom: 0; /* Adjust this value to add more or less space */
}
/* Define classes for other types of images as per your requirements */

#loadingIndicator {
    position: fixed;   /* fixed will make it stay in place even when you scroll */
    top: 0;            /* start from the top of the window */
    left: 0;           /* start from the left of the window */
    width: 100%;       /* cover the entire window width */
    height: 100%;      /* cover the entire window height */
    background: rgba(0, 0, 0, 0.75); /* semi-transparent black background to overlay content */
    display: flex;     /* use flexbox to center the child elements */
    justify-content: center; /* center children horizontally */
    align-items: center;     /* center children vertically */
    z-index: 1000;     /* large z-index to ensure it's on top of everything else */
}