@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        opacity: 0.6;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%);
        opacity: 0.6;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutToLeft {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(-100%);
        opacity: 0.6;
    }
}

@keyframes slideOutToRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0.6;
    }
}

.animate-in-left {
    animation: slideInFromLeft 0.6s ease forwards;
}

.animate-in-right {
    animation: slideInFromRight 0.6s ease forwards;
}

.animate-out-left {
    animation: slideOutToLeft 0.6s ease forwards;
}

.animate-out-right {
    animation: slideOutToRight 0.6s ease forwards;
}
#carousel-content {
    will-change: transform;
}
#carousel-video {
    will-change: transform;
}