.gallery {
    & a {
        display: block;
        position: relative;
        color: $white;
        overflow: hidden;
        &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: $theme-color;
            opacity: 0;
            z-index: 2;
            transition: all 0.3s ease 0s;
        }
        & img {
            width: 100%;
        }
        & i {
            position: absolute;
            left: 50%;
            top: 50%;
            transition: all 0.3s ease 0s;
            transform: translateX(-50%) translateY(-50%) rotateY(-180deg);
            font-size: 50px;
            opacity: 0;
            z-index: 3;
        }
    }

    &:hover {
        & a {
            &::before {
                opacity: 0.75;
            }
            & img {
                transform: scale(1.2);
            }
            & i {
                transform: translateX(-50%) translateY(-50%) rotateY(0deg);
                opacity: 1;
            }
        }
    }
}