.gallery-link {
    display: block;
    text-decoration: none;
}

/* CARD */
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    background: #000;
    box-shadow:
        0 10px 30px rgba(0,0,0,0.25),
        inset 0 0 0 1px rgba(255,255,255,0.05);
    transition:
        transform 0.45s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.45s ease;
}

/* IMAGE */
.gallery-item img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: saturate(0.9) contrast(1.05);
    transition:
        transform 0.8s cubic-bezier(.2,.8,.2,1),
        filter 0.6s ease;
}

.gallery-item .top{
 object-position: center 20%;


}

/* OVERLAY */
.gallery-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.1) 0%,
            rgba(0,0,0,0.75) 100%
        );
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.45s ease;
}

/* ICON */
.gallery-overlay i {
    color: #fff;
    font-size: 34px;
    transform: scale(0.7);
    opacity: 0;
    transition:
        transform 0.45s cubic-bezier(.2,.8,.2,1),
        opacity 0.35s ease;
}

/* LIGHT SWEEP */
.gallery-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent 30%,
        rgba(255,255,255,0.15) 50%,
        transparent 70%
    );
    transform: translateX(-120%);
    transition: transform 0.9s ease;
    pointer-events: none;
}

/* DESKTOP HOVER */
@media (hover: hover) {

    .gallery-link:hover .gallery-item {
        transform: translateY(-10px) scale(1.01);
        box-shadow:
            0 30px 60px rgba(0,0,0,0.45),
            inset 0 0 0 1px rgba(255,255,255,0.08);
    }

    .gallery-link:hover img {
        transform: scale(1.12);
        filter: saturate(1.1) contrast(1.15);
    }

    .gallery-link:hover .gallery-overlay {
        opacity: 1;
    }

    .gallery-link:hover .gallery-overlay i {
        transform: scale(1);
        opacity: 1;
    }

    .gallery-link:hover .gallery-item::before {
        transform: translateX(120%);
    }
}

/* MOBILE */
@media (max-width: 576px) {
    .gallery-item img {
        height: 210px;
    }

    .gallery-overlay {
        opacity: 1;
        background: linear-gradient(
            to top,
            rgba(0,0,0,0.75),
            rgba(0,0,0,0.15)
        );
        align-items: flex-end;
        padding-bottom: 14px;
    }

    .gallery-overlay i {
        font-size: 26px;
        opacity: 0.85;
        transform: scale(1);
    }
}