[class*=' anim--'], [class^='anim--'] {
    --anim-transition-speed: 0.6s;
    --anim-transition-ease: ease;
    --anim-transition-delay: 0s;
    --anim-amount: clamp(1rem, 3vw, 2rem);
    --anim-amount-neg: clamp(-1rem, -3vw, -2rem);
    transition: transform var(--anim-transition-speed, 0.4s) var(--anim-transition-ease, ease-out) var(--anim-transition-delay, 0.2s);
}

.anim--seh-slide-left {
    transform: translateX(var(--anim-amount));
}

.anim--seh-slide-right {
    transform: translateX(var(--anim-amount-neg));
}

.anim--seh-slide-up {
    transform: translateY(var(--anim-amount));
}

.anim--seh-slide-down {
    transform: translateY(var(--anim-amount-neg));
}

.anim--seh-fade-in {
    opacity: 0;
    transition: opacity var(--anim-transition-speed, 0.4s) var(--anim-transition-ease, ease-out) var(--anim-transition-delay, 0.2s);
}

.anim--seh-fade-in.animated {
    opacity: 1;
}

.anim--seh-slide-down.animated,
.anim--seh-slide-up.animated {
    transform: translateY(0);
}

.anim--seh-slide-right.animated,
.anim--seh-slide-left.animated {
    transform: translateX(0);
}