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

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

    --glow-y-base:  .5rem;
    --glow-b1-base: 1.25rem;
    --glow-b2-base: .75rem;

    --glow-alpha1: .05;
    --glow-alpha2: .08;

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

.hover-glow--sm,
.hover-glow--md,
.hover-glow--lg {
    --glow-y:  calc(var(--glow-y-base)  * var(--glow-elev-scale));
    --glow-b1: calc(var(--glow-b1-base) * var(--glow-elev-scale));
    --glow-b2: calc(var(--glow-b2-base) * var(--glow-elev-scale));

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

    position: relative;
    transform: translateZ(0);
    transition:
            transform var(--glow-hover-dur) var(--glow-hover-ease),
            filter var(--glow-hover-dur) var(--glow-hover-ease);
    will-change: transform, filter;
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}

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

@media (hover:hover) {
    .hover-glow--sm:hover,
    .hover-glow--md:hover,
    .hover-glow--lg:hover {
        transform: scale(var(--glow-hover-scale));
        filter:
                drop-shadow(0 var(--glow-y) var(--glow-b1) rgba(0,0,0,var(--glow-alpha1)))
                drop-shadow(0 calc(var(--glow-y)*.5) var(--glow-b2) rgba(0,0,0,var(--glow-alpha2)));
    }

    :is(.hover-glow--sm,.hover-glow--md,.hover-glow--lg):hover img {
        transform: scale(calc(1 + var(--glow-img-scale-add) * var(--glow-lift-mult)));
    }
}

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

.hover-glow--sm:active,
.hover-glow--md:active,
.hover-glow--lg:active {
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}

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

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