#arcora-projects {
    margin: 0 -.333rem;
}

#arcora-projects .project-item {
    width: calc(50% - .667rem);
    margin: .333rem;
}

#arcora-projects .img-wrapper {
    height: 0;
    padding-top: 87%;
    transition: filter  .6s ease;
}

#arcora-projects .project-item:hover .img-wrapper {
    filter: brightness(var(--images-darkness, .5));
}

#arcora-projects .img-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

#arcora-projects .project-name {
    inset: 0;
    color: #fff;
    opacity: 0;
    transition: opacity .6s .3s ease;
}

#arcora-projects .project-item:hover .project-name {
    opacity: 1;    
}

#arcora-projects #all-prjects {
    background: #ff0000;
}

#all-prjects a {
    color: #fff;
    inset: 0;
    padding .4s ease
}

#all-prjects a:hover {
    padding-left: 3rem;
}

/*@media screen and (min-width: 541px) {

    #arcora-projects .project-item {
        width: calc(50% - .667rem);
    }
}*/

@media screen and (min-width: 992px) {

    #arcora-projects .project-item {
        width: calc(25% - .667rem);
    }

    #all-prjects a {
        font-size: 2.333rem;
    }
}