.kcx-image-stack {
    --kcx-stack-offset-x: 10px;
    --kcx-stack-offset-y: 12px;
    --kcx-stack-scale-step: 0.04;
    --kcx-stack-rotate-step: -1.5deg;
    --kcx-stack-duration: 650ms;
    --kcx-stack-radius: 18px;
    --kcx-stack-bg: #f3f3f3;
    position: relative;
    width: 100%;
}

.kcx-image-stack-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 220px;
}

.kcx-image-stack-card {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    border-radius: var(--kcx-stack-radius);
    background: var(--kcx-stack-bg);
    transform:
        translate(
            calc(var(--stack-order, 0) * var(--kcx-stack-offset-x)),
            calc(var(--stack-order, 0) * var(--kcx-stack-offset-y) * -1)
        )
        scale(calc(1 - (var(--stack-order, 0) * var(--kcx-stack-scale-step))))
        rotate(calc(var(--stack-order, 0) * var(--kcx-stack-rotate-step)));
    opacity: var(--stack-opacity, 1);
    transition:
        transform var(--kcx-stack-duration) cubic-bezier(0.2, 0.7, 0.2, 1),
        opacity var(--kcx-stack-duration) ease;
    will-change: transform, opacity;
}

.kcx-image-stack-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.kcx-image-stack-card.is-hidden {
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .kcx-image-stack-card {
        transition: none;
    }
}