@media (min-width: 700px) and (max-width: 1000px) {
    .art-item {
        height: 20vw;
    }
}
@media (min-width: 1000px) {
    .art-item {
        height: 200px;
    }
}
@media (min-width: 700px) {
    .art-display {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        max-width: 1000px;
        margin: auto;
    }
    .art-item {
        position: relative;
        flex-direction: column;
        flex: 1 1 30%;
        padding: 5px;
        box-sizing: border-box;
        cursor: pointer;
    }
    .art-item:nth-child(10n + 1),
    .art-item:nth-child(10n + 7) {
        flex: 2 1 60%;
    }
    .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%;
    }
    .art-display.show-border .art-border {
        padding: 10px;
        box-sizing: border-box;
        border: 1px solid #202020;
        transition: border-color 0.5s;
        -webkit-transition: border-color 0.5s;
        -moz-transition: border-color 0.5s;
        -ms-transition: border-color 0.5s;
        -o-transition: border-color 0.5s;
    }
    .art-display.show-border .art-border:hover{
        border-color: white;
    }
}