/*****************************
* FACES
*****************************/

.faces {
     display: flex;
     justify-content: space-between;
     width: 80vw;
     height: 30vh;
}

.face {
     width: 100%;
     height: 33.33vh;
     position: relative;
     overflow: hidden;
     transition: all 0.5s ease;
}

.face:hover {
     filter: invert(50%);
}

.face img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     opacity: 0;
     transform: scale(0.9);
     transition: all 2s ease-out forwards;
}

.face.active img {
     animation: fadeIn 2s ease-out forwards;
}

@keyframes fadeIn {
     0% {
          opacity: 0;
          transform: scale(0.9);
     }

     100% {
          opacity: 1;
          transform: scale(1);
     }
}