/* images */

/*
#img_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
*/

/* OLD:
#img_container {
    display: inline-flex;
    margin-top: 20px;
    margin-bottom: 20px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1vw;
}

img {
    border: 0.2vw solid #fff;
    max-width: 95vw;
}

@media screen and (min-width:1000px) {
    img {
        max-width: 48vw;
        max-height: 60vh;
    }
}

@media screen and (max-width:1000px) {
    a {
        font-weight: 400;
        font-size: 30px;
    }

    header {
        border-bottom: 2px solid;
    }
}
*/

/* NEW:
#img_container {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 200px;
    margin-right: 200px;

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    grid-gap: 10px;
    align-items: center;

    justify-content: center;
}
#img_container img {
    border: 0.2vw solid #fff;
    max-width: 100%;
}
*/

img {
    width: 100%;
    /*border: 0.2vw solid #fff;*/
}

#img_container {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;

    margin-top: 10px;
    justify-content: center;
}

/* Create four equal columns that sits next to each other */
.column {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
    max-width: 40%;
    padding: 0 4px;
}

.column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
/*
@media  (max-width: 800px) {
    .column {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
    }
}
*/

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media  (max-width: 1000px) {
    .column {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }
}