.top-gallery {
    display: -webkit-flex;
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-bottom:64px;
}

.top-gallery .item {
    width: 32.5%;
    cursor:pointer;
}

.top-gallery .item:hover div.item-wrapper > a {
    background: linear-gradient(0deg,rgba(0,0,0,.90) 0,rgba(0,0,0,.05) 80%,rgba(0,0,0,.05) 100%);
}

div.item-wrapper {
    width: 100%;
    padding-bottom: 66.66%; /* 3:2 */
    position: relative;
    background-repeat: no-repeat;
    background-size:cover;
}

div.item-wrapper > a {
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    padding:10px;
    font-size: 22px;
    color:#fff;
    text-decoration:none;
    background: linear-gradient(0deg,rgba(0,0,0,.75) 0,rgba(0,0,0,.05) 70%,rgba(0,0,0,.05) 100%);
}

.top-gallery .title{
    position:absolute;
    bottom:0;
    font-weight:bold;
    padding:10px 4px;
    line-height:30px;
}








/* * * * * * * * * * * * * * * * * *
 * 
 *   H I - R E S    M O N I T O R
 * 
 * * * * * * * * * * * * * * * * * */


@media (min-width: 1440px){
    


}


/* * * * * * * * * * * * * * * * * *
 * 
 *          M O N I T O R
 * 
 * * * * * * * * * * * * * * * * * */

@media (min-width: 1020px) and (max-width: 1439px){
    


}


/* * * * * * * * * * * * * * * * * *
 * 
 *          T A B L E T
 * 
 * * * * * * * * * * * * * * * * * */

@media (min-width: 768px) and (max-width: 1019px){
    


}

/* * * * * * * * * * * * * * * * * *
 * 
 *      S M A R T P H O N E
 * 
 * * * * * * * * * * * * * * * * * */

@media (max-width: 767px){
    
    .top-gallery {
        flex-wrap: wrap;
        margin-bottom: 32px;
    }
    
    .top-gallery .item{
        width:100%;
    }

}