.section-projects {
    
}
.projects {
    box-sizing:border-box;
    column-gap: 1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:flex-start;
    row-gap: 1.5rem;
}

.project {
    position: relative;
    width: 100%;
    aspect-ratio: 2/1;
    display: flex;
    flex-direction: column;
    transition: .5s;
    flex-basis: auto;
    
}
.project__link {
    height: 100%;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    width: 100%;
    z-index: 5;

    transition: .25s;
}
.developing .project__link::after {
    width: auto;
    background-color: rgb(255, 205, 66);
    height: 100%;
    position: absolute;
    content: 'em desenvolvimento';
    text-transform: uppercase;
    writing-mode: vertical-rl;
    font-size: 2rem;
    text-align: center;
    top: 0;
    right: 0;
    z-index: 100;
}
.project.emphasis {
    order: 0;
    width: 100%;
    aspect-ratio: 4/1;
}

.project.emphasis .project__footer {
    height: 100%;
}
.project.emphasis .project__footer .project__footer--name {
    font-size: 2rem;
}
.project.emphasis .project__footer .project__footer--icon {
    height: 75%;
}

.project__image {
    aspect-ratio: 2/1;
    background-color: #222222;
    bottom: 0;
    
    object-fit:cover;
    position: absolute;
    top: 0;
    
    width: 100%;

    transition: .25s;

}

.project__footer {
    align-items: center;
    position: absolute;
    display: flex;
    padding: .5rem;
    background-color: #ccc;
    width: 100%;
    z-index:10;
}
.project__footer--icon {
    border-radius: .5rem;
    height: 50px;
}
.project__footer--name {
    color: var(--darkest-gray-text);
    font-weight: 700;
    height: fit-content;
    font-size: 1rem;
    margin: 0 0 0 .5rem;
    letter-spacing: 1px;
}



/*Classes of project's element without images (screenshots)*/ 
.projects__noImg{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.projects__noImg .project__link {
    position: relative;
    flex-basis: 45%;
}
.projects__noImg .project__footer{
    height: 100%;
}
.projects__noImg .project__footer--name{
    font-size: .75rem;
}




@media screen and (min-width:480px) {
    .project {
        width: calc(50% - .5rem);
    }
}
@media screen and (min-width:992px) {
    .project {
        width: calc(100% / 3 - .75rem);
    }
    /*Animations that only works in screens with min-width: 992px */
    .project__link:hover {
        box-shadow: 0 .5rem .35rem #888888aa;
        transform: translateY(-.5rem) ;
        z-index: 10;
        
        
        animation-name: flipCard;
        animation-delay: 0s;
        animation-duration: 2s;
    
    }
    .project:nth-child(3n+1):not(.emphasis) .project__link:hover{
        box-shadow: -.5rem .5rem .35rem #888888aa;
        transform: translateX(.5rem) translateY(-.5rem);
        
    }
    .project:nth-child(3n-1) .project__link:hover {
        box-shadow: .5rem .5rem .35rem #888888aa;
        transform: translateX(-.5rem) translateY(-.5rem) ;
    }
    .project__link:hover .project__image {
        overflow: hidden;
        transform: scale(1.1);
        transition: .25s;
    }

@media screen and (min-width:1440px) {
    .section-projects {
        padding-left: 1rem;
    }
    .projects {
        margin: 0 auto;
    }
}

.fadeOut {
    animation-name: fadeIn;
    animation-direction: reverse;
    animation-duration: 2s;
}
.fadeIn {
    animation-name: fadeIn;
    animation-duration: 2s;
}
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: scale:0.5;
    }
    100% {
        opacity: 1;
        transform: scale: 1;
    }
}