/* 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 */