:root{
    --hover-scale-base: 1.008;
    --hover-raise-base: .08rem;

    --hover-dur: 180ms;
    --hover-ease: cubic-bezier(.2,.8,.2,1);

    --y0-base: .5px;
    --b0-base: 1px;
    --y-base:  .5rem;
    --b1-base: 1.25rem;
    --b2-base: .75rem;

    --alpha0: .01;
    --alpha0b: .02;
    --alpha1: .05;
    --alpha2: .04;

    --img-scale-add: .03;
}

.hover-raise--sm,
.hover-raise--md,
.hover-raise--lg{
    --y0: var(--y0-base);
    --b0: var(--b0-base);

    --y:  calc(var(--y-base)  * var(--elev-scale));
    --b1: calc(var(--b1-base) * var(--elev-scale));
    --b2: calc(var(--b2-base) * var(--elev-scale));

    --hover-scale: calc(1 + (var(--hover-scale-base) - 1) * var(--lift-mult));
    --hover-raise: calc(var(--hover-raise-base) * var(--lift-mult));

    position: relative;
    box-shadow:
            0 var(--y0) var(--b0) rgba(0,0,0,var(--alpha0b)),
            0 0 0 1px  rgba(0,0,0,var(--alpha0));
    transform: translateZ(0);
    transition:
            transform var(--hover-dur) var(--hover-ease),
            box-shadow var(--hover-dur) var(--hover-ease),
            filter    var(--hover-dur) var(--hover-ease);
    will-change: transform, box-shadow;
}

:is(.hover-raise--sm,.hover-raise--md,.hover-raise--lg) img{
    transition: transform var(--hover-dur) var(--hover-ease);
}

@media (hover:hover){
    .hover-raise--sm:hover,
    .hover-raise--md:hover,
    .hover-raise--lg:hover{
        transform: translateY(var(--hover-raise)) scale(var(--hover-scale));
        box-shadow:
                0 var(--y)            var(--b1) rgba(0,0,0,var(--alpha1)),
                0 calc(var(--y)*.5)   var(--b2) rgba(0,0,0,var(--alpha2));
    }
    :is(.hover-raise--sm,.hover-raise--md,.hover-raise--lg):hover img{
        transform: scale(calc(1 + var(--img-scale-add) * var(--lift-mult)));
    }
}

.hover-raise--sm:focus-visible,
.hover-raise--md:focus-visible,
.hover-raise--lg:focus-visible{
    outline: none;
    box-shadow:
            0 0 0 .16rem rgba(0,125,255,.18),
            0 var(--y)          var(--b1) rgba(0,0,0,var(--alpha1)),
            0 calc(var(--y)*.5) var(--b2) rgba(0,0,0,var(--alpha2));
    transform: translateY(var(--hover-raise)) scale(var(--hover-scale));
}

.hover-raise--sm:active,
.hover-raise--md:active,
.hover-raise--lg:active{
    transform: translateY(0) scale(.998);
    box-shadow:
            0 var(--y0) var(--b0) rgba(0,0,0,var(--alpha0b)),
            0 0 0 1px   rgba(0,0,0,var(--alpha0));
}

@media (prefers-reduced-motion: reduce){
    .hover-raise--sm,
    .hover-raise--md,
    .hover-raise--lg,
    :is(.hover-raise--sm,.hover-raise--md,.hover-raise--lg) img{
        transition: none;
    }
}

.hover-raise--sm{ --elev-scale:.2;  --lift-mult:.6;  }
.hover-raise--md{ --elev-scale:1;   --lift-mult:1;   }
.hover-raise--lg{ --elev-scale:1.15;--lift-mult:1.15;}