.grow {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
}

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

.gcolumn img {
    vertical-align: middle;
}

.gcolumn img:hover {
    
}


.zdj {
    margin-top: 8px;
    position: relative;
}

.zdj:hover .lupa {
    opacity: 0.7;
    cursor: pointer;
}

.lupa{
    position: absolute;
    float:left;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0;
-webkit-transition: all 0.5s ease-in-out, -webkit-transform 0.5s;
  -o-transition: all 0.5s ease-in-out, -o-transform 0.5s;
  -moz-transition: all 0.5s ease-in-out, -moz-transform 0.5s;
}
.lupa i {
    position: absolute;
    color:white;
    font-size: 35px;
    top:40%;
    left:43%;
}

#zaslonka{
    background-color: white;
    position: relative;
    width: 100%;
    height: 100px;
    top:-15px;
}


/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
    .gcolumn {
        -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 screen and (max-width: 600px) {
    
    .gcolumn {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }
    
    #zaslonka {
        display: none;
    }
    
}