.imgal-container {
    line-height: 0;
    -webkit-column-count: 4;
    -webkit-column-gap: 0;
    -moz-column-count: 4;
    -moz-column-gap: 0;
    column-count: 4;
    column-gap: 0
}

.imgal-img {
    float: left;
    width: 100%;
    padding: 5px;
    height: auto;
    transition: filter .2s
}

.imgal-img:hover {
    -webkit-filter: opacity(80%);
    filter: opacity(80%);
    cursor: pointer
}

.imgal-modal {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #000;
    color: #fff;
    vertical-align: middle;
    height: 100vh;
    width: 100vw
}

#imgal-modal-close {
    display: inline;
    font-size: 2rem;
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    cursor: pointer
}

.imgal-modal-img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

@media only screen and (max-width:768px) {
    .imgal-container {
        line-height: 0;
        -webkit-column-count: 2;
        -webkit-column-gap: 0;
        -moz-column-count: 2;
        -moz-column-gap: 0;
        column-count: 2;
        column-gap: 0
    }
}

@media only screen and (min-width:768px) {
    .imgal-container {
        line-height: 0;
        -webkit-column-count: 3;
        -webkit-column-gap: 0;
        -moz-column-count: 3;
        -moz-column-gap: 0;
        column-count: 3;
        column-gap: 0
    }
}

@media only screen and (min-width:992px) {
    .imgal-container {
        line-height: 0;
        -webkit-column-count: 3;
        -webkit-column-gap: 0;
        -moz-column-count: 3;
        -moz-column-gap: 0;
        column-count: 3;
        column-gap: 0
    }
}

@media only screen and (min-width:1200px) {
    .imgal-container {
        line-height: 0;
        -webkit-column-count: 3;
        -webkit-column-gap: 0;
        -moz-column-count: 3;
        -moz-column-gap: 0;
        column-count: 3;
        column-gap: 0
    }
}