#projects{ font-size: 1rem; }
#projects .item{ margin-bottom: 1.75rem;}
#projects .item .inner{
    background: linear-gradient(#EEE, #CCC); height: 500px; position: relative;
    overflow: hidden;
}
#projects .item .image a{ display: block; height: 100%; width: 100%; }
#projects .item .image{ height: 100%; transition: .2s; }
#projects .item .image img{ height: 100%; width: 100%; object-fit: cover;}
#projects .item .content{
    position: absolute; left: 0; top: 0; height: 100%; width: 100%; display: flex; align-items: center;
    text-align: center;
}

#projects .item .inner:hover{ box-shadow: 0 0 0 2px #FFC100; }

#projects > .image{ height: 500px; width: 33.33%; float: left; margin: 0 60px 50px 0; }
#projects > .image img{ height: 100%; width: 100%; object-fit: cover; }

/***** RESPONSIVE *****/
@media only screen and (max-width: 992px) {
    #projects > .image{ height: 350px; }
}
@media only screen and (max-width: 768px) {
    #projects > .image{ float: none; width: 100%; }
}
/***** RESPONSIVE *****/