/* ===================================
   Phones and small screens
   =================================== */

/* This holds all of the columns */
main {
    display: flex;          /* Put the columns next to each other */
    flex-wrap: wrap;        /* Move columns to a new line if needed */
    padding: 0 12px;        /* Add a little space on the left and right */
    vertical-align: middle;
}

/* Each section that contains an image */
.column {
    margin-top: 0;          /* No extra space above */
    max-width: 100%;        /* Take up the whole row */
    vertical-align: middle;
}

/* The images inside the columns */
.column img {
    padding-top: 10px;      /* Add a small gap above each image */
    width: 100%;            /* Make the image fill the column */
}


/* ===================================
   Tablets and bigger screens
   =================================== */
@media only screen and (min-width: 768px) {

    /* Show 2 columns side by side */
    .column {
        max-width: 50%;     /* Each column uses half the row */
        padding: 0 6px;     /* Add a small gap between columns */
    }

    /* Make the outside spacing a little smaller */
    main {
        padding: 0 6px;
    }
}


/* ===================================
   Large computer screens
   =================================== */
@media only screen and (min-width: 1200px) {

    /* Show 4 columns side by side */
    .column {
        max-width: 25%;     /* Each column uses one-quarter of the row */
    }
}