lightbox-project {
    position: relative;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 20rem;
    grid-auto-rows: 20rem;
    gap: 1.5rem;
    font-family: Titillium Web;
    border-radius: 3.75rem;

    &:not(:has(img)) {
        outline: 1px solid white;
    }

    &:has(>img:nth-of-type(1)):not(:has(>img:nth-of-type(2))) {
        >img {
            grid-column: 1 / -1;
        }
    }

    &:has(>img:nth-of-type(2)):not(:has(>img:nth-of-type(3))) {
        >img {
            grid-column: span 2;
        }
    }

    &:has(>img:nth-of-type(3)):not(:has(>img:nth-of-type(4))) {
        >img {
            & {
                grid-column: span 2;
            }

            &:nth-of-type(1) {
                grid-column: 1 / -1;
            }
        }
    }

    &:has(>img:nth-of-type(4)) {
        >img {
            &:nth-of-type(1) {
                grid-column: 1 / -1;
            }

            &:nth-of-type(3) {
                grid-column: span 2;
            }
        }
    }

    >img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        border-radius: 3.75rem;
        pointer-events: all;
    }

    &:hover::after {
        opacity: 1;
    }
}