/* Mobile First View  */


main {
    background-color: var(--background);
}

#row {
    display:flex;
    flex-wrap: wrap;
    padding: 0 5px;
    vertical-align: middle;
    justify-content: center;
    
}
.column {
    margin-top: 15px;   
    max-width: 80%;
    vertical-align: middle;
}

.column img {
    padding: 5px;
    border-radius: 20px;
    width: 100%;
    aspect-ratio: 1/1; /* makes them square */
    object-fit: cover; /* crops them instead of squashing them */
    /* opacity: 1; */
}

/* MEDIA BREAKS */

@media only screen and (min-width: 600px) {
    .column {
        margin-top: 15px;
        max-width: 48%;
        padding: 0 5px;
        
        }    
}

@media only screen and (min-width: 768px) {
    /* collumns to 3 on medium screens*/
    .column {
        margin-top: 15px;
        max-width: 30%;
        padding: 0 5px;
        }
}
@media only screen and (min-width: 1200px) { 
/* photos go to 4 columns on larger screens */
    .column {
        margin-top: 15px;
        max-width: 25%;
        padding: 0 6px;   
        }
}