/* Border box declaration 
https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
html {
  box-sizing: border-box;
}
/* inherit border-box on all elements in the universe and before and after
 */
*, 
*:before, 
*:after {
  box-sizing: inherit;
}

body {
    font-family: Arial, Geneva, sans-serif;

    /* water background to cover entire page behind wrapper */
    background-image: url("https://cdna.artstation.com/p/assets/images/images/030/953/926/large/lunar-0001.jpg?1602150313");
    background-size: cover;
    background-attachment:fixed;
}

.wrapper {
    width: 97%;
    max-width: 1200px;
    margin: 0 auto;
    float: none;
    background-color: #fff;
}

article img {
    width: 100%;
    height: auto;
}

/* Grid system */
.row {
    display: grid;

    /* Mobile single column */
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
    margin-bottom: 15px;

    /*Pack items tightly in rows so that gaps are filled if necessary*/
    grid-auto-flow: dense;

    /* Sets a minimum height for all rows */
    grid-auto-rows: minmax(200px, auto);
}

/* Special grid for row 6 */
.row-even {
    display: grid;

    /*5 columns for row 6*/
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 15px;
}

.row-even article {
    grid-column: span 1;
    min-width: 0;
}

/*Colors and grid column spans for each article */
/* Mobile first: all articles span full width */
.col-1  { background-color: #A3CDD9; }
.col-2  { background-color: #FFFCE6; }
.col-3  { background-color: #F2CC39; }
.col-4  { background-color: #C2B8AD; }
.col-even { background-color: #87c4c4; }

/* Grid adjustments for tablet */
@media (min-width: 480px) {

    .row {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Column spans on tablet */

    /* Makes col-1 span 1 column */
    .col-1 { grid-column: span 1; }     
    
    /* Makes col-2, col-3, and col-4 span 2 columns */
    .col-2 { grid-column: span 2; }        
    .col-3 { grid-column: span 2; }        
    .col-4 { grid-column: span 2; }        
}

/* Grid adjustments for desktop */
@media (min-width: 768px) {

    .row {
        grid-template-columns: repeat(4, 1fr);
    }

    .col-1 { grid-column: span 1; }        
    .col-2 { grid-column: span 2; }        
    .col-3 { grid-column: span 3; } 

    /* Makes col-4 span all 4 columns */
    .col-4 { grid-column: 1 / -1; }
}