.image-gallery {
    margin-bottom: 20px;
}

.image-gallery a {
    display: block;
    float: left;
    width: 25%;
    padding: 0 10px 20px 10px;
}
.image-gallery a img {
    display: block;
    margin: 0;
    width: 100%;
    height: auto;
    font-size: 0;
    box-shadow: 2px 2px 15px -4px rgba(128, 128, 128, 01);
}

/* Large */
@media screen and (max-width: 1280px) {

}

/* Medium */
@media screen and (max-width: 980px) {
    .image-gallery a {
        width: 33.3%;
    }
}

/* Small */
@media screen and (max-width: 736px) {
    .image-gallery a {
        width: 50%;
    }
}

@media screen and (max-width: 500px) {
    .image-gallery a {
        width: 100%;
    }
}

/* Clear Fix */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}