#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; }

#project ul{ margin: 0 0 0 25px; padding: 0; }
#project .text-wrapper{ margin-left: 30px; }
#project .text-wrapper h3{ font-size: 30px; }

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