.dataProject {
    color: var(--gelap);
    display: flex;
    flex-direction: column;

    .tulisan {
        line-height: 1;
        padding-bottom: 1rem;
        .judul2 {
            display: flex;
            gap: 1rem;
            h1 {
                color: var(--gelap);
            }
            .arrowJudul2 {
                display: flex;
                align-items: center;


                height: 2.3rem;
                gap: 1rem;

                opacity: 0;

                transform: translateX(-.5rem);
                transition: transform .1s ease-out, opacity .1s ease-out;
                svg {
                    height: 100%;
                }
            }
        }
        .judul2:hover {
            .arrowJudul2 {
                opacity: 1;
                transform: translateX(0);
            }
        }
    }

    .gambar, .gaambar {
        --tinggiGambarProyek: 19rem;
        min-height: var(--tinggiGambarProyek);
        height: var(--tinggiGambarProyek);

        overflow: hidden;
        width: 100%;

        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;

        cursor: cell;

        .gradasi {
            height: 100%;
            width: 100%;
            position: absolute;;

            background: linear-gradient(to bottom, transparent, transparent, transparent, rgba(0,0,0,0.7));
            z-index: 1;
        }
        img {
            height: auto;
            width: 100%;

            transform: translateY(0%);
            transition: top .7s linear, transform .7s linear;
        }
        .gradasi:hover {
            background: linear-gradient(to bottom, transparent, transparent, transparent);
        }
    }
    .gambar:hover {
        img {
            transform: translateY(20%);
        }
    }

    .dependency {
        display: flex;
        margin: .5rem 0;
        .icon {
            display: flex;
            height: 1rem;
            gap: .1rem;
            img {
                height: 2rem;
            }
        }
    }
}


@media screen and (max-width:456px) {
    .dataProject {
        .tulisan {
            display: flex;
            flex-direction: column;
        }
    }
}