/************/
/* Projects */
/************/
.project-grid {display: flex; flex-wrap: wrap; margin-top: 30px; justify-content: center;}
.project-grid .project-area {width: 25%; padding: 5px;}
.project-grid .project-area .project-holder {background-repeat: no-repeat; background-size: cover; border-radius: 5px; background-position: center center;}
.project-grid .project-area a {display: block; min-height: 330px; text-align: center; padding: 30px 15px; text-decoration: none; border-radius: 5px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 30%, transparent 100%);}
.project-grid .project-area h3 {color: #ffcd00; font-size: 24px;}
.project-grid .project-area p {color: #ffffff; font-family: 'aktiv-grotesk', sans-serif; line-height: 1.4; font-size: 14px;}
.project-grid .project-area .hover-area {opacity: 0; -webkit-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; padding-top: 20px;}
.project-grid .project-area a:hover .hover-area {opacity: 1;}

@media (max-width: 1199px) {
    .project-grid .project-area {width: 33.3%;}
}

@media (max-width: 991px) {
    .project-grid .project-area {width: 50%; max-width: 445px;}
}

@media (max-width: 767px) {
    .project-grid .project-area {width: 100%;}
    .project-grid .project-area a {min-height: 280px;}
}