.imagenav{
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: unset;

    --ratio: 16 / 5;

    li{
        aspect-ratio: var(--ratio);
        width: 100%;
        position: relative;
        margin: 0;
        overflow: hidden;
    }

    figure{
        position: relative;
        margin: 0;
        overflow: hidden;
        aspect-ratio: var(--ratio);
        width: 100%;

        &::before{

                content: '';
                position: absolute;
                top: 0;
                left: 0;
           
                aspect-ratio: var(--ratio);
                width: 100%;

                background: color-mix(in srgb, var(--wp--preset--color--text) 90%, transparent);
                

               transform: translateY(100%);
                z-index: 5;
                transition: var(--wp--custom--main-trans);

            }
        
        img{
            aspect-ratio: var(--ratio);
            width: 100%;
            max-width: unset;
            height: auto;
            object-fit: cover;
            filter: grayscale(1) brightness(1.25) contrast(1.25);
            position: relative;
        }

        figcaption{
            position: absolute;
            top: 0;
            left: 0;
            aspect-ratio: var(--ratio);
            width: 100%;
            box-sizing: border-box;
            line-height: 1;

            display: flex;
            align-items: flex-end;
            justify-content: end;

            z-index: 10;
            font-weight: 300;
            letter-spacing: .1025em;
            transform: translateX(80dvw);
            opacity: 0;

            padding: var(--wp--preset--font-size--2-dvw);

            color: var(--wp--preset--color--light);
            font-size: var(--wp--preset--font-size--5-dvw);
            text-transform: uppercase;
            transition: var(--wp--custom--main-trans);
        }

        &:hover{

            &::before{
                transform: none;
            }
            
            figcaption{
                transform: none;
                opacity: 1;
            }
        }
    }

    a.activehover{
        figure{
             &::before{
                transform: none;
            }
            
            figcaption{
                transform: none;
                opacity: 1;
            }
        }
    }
}

@media screen and (max-width: 990px){
    .imagenav {
        & figure {
            &::before {
                display: none;
            }

            figcaption{
                transform: none;
                opacity: 1;
                background: color-mix(in srgb, var(--wp--preset--color--text) 90%, transparent);
                width: auto;
                top: auto;
                bottom: 0;
                aspect-ratio: unset;
            }
        }
    }
}