#gallery {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;

    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
}

@media (max-width: 1200px) {
    #gallery {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;

        -webkit-column-gap: 20px;
        -moz-column-gap: 20px;
        column-gap: 20px;
    }
}

@media (max-width: 800px) {
    #gallery {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;

        -webkit-column-gap: 20px;
        -moz-column-gap: 20px;
        column-gap: 20px;
    }
}

@media (max-width: 600px) {
    #gallery {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}

#gallery, .imgg, #gallery video {
    width: 100%;
    height: auto;
    margin: 4% auto;
    border-radius: 25px;
    cursor: pointer;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

.modal-img, .model-vid {
    width: 100%;
    height: auto;
}

.modal-body {
    padding: 0px;
}

.imgg {
    transition: .4s ease;
}

.imgg:hover {
    transform: scale(1.05);
    transition: .4s ease;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
}

video {
    transition: .4s ease;
}

video:hover {
    transform: scale(1.05);
    transition: .4s ease;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
}