﻿

div.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

div.gallery-item {
    margin: 5px;
    border: 1px solid #fff;
    box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.3);
    width: calc(25% - 20px);
}

    div.gallery-item:hover {
        border: 1px solid #fff;
        box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
        transition: 0.2s ease-in-out;
    }

    div.gallery-item img {
        width: 100%;
        height: auto;
    }

    div.gallery-item div.desc {
        padding: 15px;
        text-align: center;
    }

@media only screen and (max-width: 768px) {
    div.gallery-item {
        width: calc(50% - 20px);
    }
}

@media only screen and (max-width: 480px) {
    div.gallery-item {
        width: calc(100% - 20px);
    }
}
