@keyframes enter-left {
    from {
        opacity: 0;
        transform: translateX(-99%) translateY(-20px) rotate(-60deg);
    }
    20% {
        opacity: 1;
    }
    to {
        opacity: 1;
        transform: translateX(25px) rotate(-20deg);
    }
}

@keyframes enter-right {
    from {
        opacity: 0;
        transform: translateX(99%) translateY(-80px) rotate(90deg);
    }
    20% {
        opacity: 1;
    }
    to {
        opacity: 1;
        transform: translateX(-25px) translateY(25px) rotate(10deg);
    }
}

.card {
    opacity: 0;
}


.cards-animation .card-left {
    position: relative;
    animation: enter-left .7s ease-out forwards;
}

.cards-animation .card-right {
    position: relative;
    animation: enter-right .7s ease-out forwards;
}