.galery {
    margin-top: 10px;
    margin-bottom: 20px;
    height: 400px;
    display: grid;
    place-items: center;
}

.galery ul {
    display: flex;
    width: calc(80% - 2rem);
    padding: 0;
    margin: 0;
    list-style-type: none;
    height: 330px;
}

.galery li {
    padding: 0;
}

.galery img {
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.2s ease;
}

.galery ul:is(:hover, :focus-within) img {
    opacity: calc(0.1 + (var(--active-lerp, 0) * 0.9));
    filter: grayscale(calc(1 - var(--active-lerp, 0)));
}

:root {
    --lerp-0: 1;
    --lerp-1: 0.5787037;
    --lerp-2: 0.2962963;
    --lerp-3: 0.125;
    --lerp-4: 0.037037;
    --lerp-5: 0.0046296;
    --lerp-6: 0;
}

.galery a {
    outline-offset: 4px;
}

.galery li {
    flex: calc(0.1 + (var(--active-lerp, 0) * 1));
    transition: flex 0.2s ease;
}

.galery li:is(:hover, :focus-within) {
    --active-lerp: var(--lerp-0);
    z-index: 7;
}

.galery li:has(+ li:is(:hover, :focus-within)),
li:is(:hover, :focus-within)+li {
    --active-lerp: var(--lerp-1);
    z-index: 6;
}

.galery li:has(+ li + li:is(:hover, :focus-within)),
li:is(:hover, :focus-within)+li+li {
    --active-lerp: var(--lerp-2);
    z-index: 5;
}

.galery li:has(+ li + li + li:is(:hover, :focus-within)),
li:is(:hover, :focus-within)+li+li+li {
    --active-lerp: var(--lerp-3);
    z-index: 4;
}

.galery li:has(+ li + li + li + li:is(:hover, :focus-within)),
li:is(:hover, :focus-within)+li+li+li+li {
    --active-lerp: var(--lerp-4);
    z-index: 3;
}

.galery li:has(+ li + li + li + li + li:is(:hover, :focus-within)),
li:is(:hover, :focus-within)+li+li+li+li+li {
    --active-lerp: var(--lerp-5);
    z-index: 2;
}

.galery li:has(+ li + li + li + li + li + li:is(:hover, :focus-within)),
li:is(:hover, :focus-within)+li+li+li+li+li+li {
    --active-lerp: var(--lerp-6);
    z-index: 1;
}

@media only screen and (max-width: 600px) {
    .galery{
        height: 350px;
    }
    .galery ul {
        height: 280px;
        width: 85%;
    }
}