.shape-outer {
    display: flex;
    xflex-shrink: 0;
    height: 100%;
    width: 100%;
    xbackground: linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5);
    xbackground: linear-gradient(to bottom right,  #00cc66 20%, #562b7c 50%, #2b86c5 100%);
    background: linear-gradient(to bottom right,  #00cc66 0%, #301975 100%);
    aspect-ratio: 1/1;
    pointer-events: none;
}

.list-item > .image-cont:hover .shape-outer {
    background: rgb(0, 255, 128)
}

.list-item > .image-cont:hover .gradient-border-inset-shadow {
    box-shadow: 
        inset 0px 0px 10px rgb(0, 196, 0)
    ;
}



.shape-inner {	
    height: 100%;
    width: 100%;
    aspect-ratio: 1/1;
    clip-path: inset(1px round 8px);
}

.gradient-border-inset-shadow {
    position: absolute;
    border-radius: 4px;
    aspect-ratio: 1/1;
    z-index: 1;
    --shadow-size: 2px;
    box-shadow:
        inset 0px 0px var(--shadow-size) black,
        inset 0px 0px var(--shadow-size) black
    ;
}