/* six columns, as defined in all.css */

#galeria div.i {
    grid-column-start: 2;
    grid-row-start: 1;
}

#galeria div.ii {
    grid-column-start: 3;
    grid-row-start: 2;
}

#galeria div.iii {
    grid-column-start: 1;
    grid-row-start: 1;
}

#galeria div.iv {
    grid-column-start: 5;
    grid-row-start: 1;
}

/**************************
* SCREEN SIZE ADJUSTMENTS *
**************************/

@media (max-width: 939px) {

    #galeria {
        grid-template-columns: repeat( 4, 1fr );
    }
    
    #galeria div.i {
        grid-column-start: 2;
        grid-row-start: 1;
    }
    
    #galeria div.ii {
        grid-column-start: 3;
        grid-row-start: 3;
    }
    
    #galeria div.iii {
        grid-column-start: 1;
        grid-row-start: 2;
    }
    
    #galeria div.iv {
        grid-column-start: 4;
        grid-row-start: 1;
    }
    
}

@media (max-width: 627px) {

    #galeria {
        grid-template-columns: repeat( 3, 1fr );
    }
    
    #galeria div.i {
        grid-column-start: 1;
        grid-row-start: 2;
    }
    
    #galeria div.ii {
        grid-column-start: 2;
        grid-row-start: 4;
    }
    
    #galeria div.iii {
        grid-column-start: 1;
        grid-row-start: 3;
    }
    
    #galeria div.iv {
        grid-column-start: 3;
        grid-row-start: 1;
    }
    
}

@media (max-width: 360px) { /* height: 778px */

    #galeria {
        grid-template-columns: repeat( 2, 1fr );
    }
    
    #galeria div.i {
        grid-column-start: 1;
        grid-row-start: 1;
    }
    
    #galeria div.ii {
        grid-column-start: 1;
        grid-row-start: 5;
    }
    
    #galeria div.iii {
        grid-column-start: 1;
        grid-row-start: 3;
    }
    
    #galeria div.iv {
        grid-column-start: 2;
        grid-row-start: 2;
    }
    
}