@media (max-width: 700px) {
    .art-display {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        margin: auto;
    }
    .art-item {
        position: relative;
        flex-direction: column;
        flex: 1 1 50%;
        box-sizing: border-box;
        cursor: pointer;
        padding-bottom: 50%;
    }
    .art-item:nth-child(5n + 1) {
        flex: 1 1 100%;
    }
    .art-item:last-child {
        display: none;
    }
    .art-image {
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
        background-position: center center;
        transition: background-size 0.5s;
        -webkit-transition: background-size 0.5s;
        -moz-transition: background-size 0.5s;
        -ms-transition: background-size 0.5s;
        -o-transition: background-size 0.5s;
    }
    .art-item:hover .art-image {
        background-size: 120% 120%;
    }
    .art-display .art-border {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
    }
}