@keyframes cardSwitch {
    0% {
        z-index: 10;
        transform: translate(15%, 3%) rotate(5deg) scale(0.9);
    }

    16.67% {
        z-index: 20;
        transform: translate(0%, 0%) scale(1);
    }

    33.33% {
        z-index: 20;
        transform: translate(0%, 0%) scale(1);
    }

    50% {
        z-index: 10;
        transform: translate(-15%, 3%) rotate(-5deg) scale(0.9);
    }

    66.67% {
        z-index: 10;
        transform: translate(-15%, 3%) rotate(-5deg) scale(0.9);
    }

    83.33% {
        z-index: 10;
        transform: translate(15%, 3%) rotate(5deg) scale(0.9);
    }

    100% {
        z-index: 10;
        transform: translate(15%, 3%) rotate(5deg) scale(0.9);
    }
}

.card1 {
    animation: cardSwitch 6s linear infinite;
}

.card2 {
    animation: cardSwitch 6s linear 2s infinite;
}

.card3 {
    animation: cardSwitch 6s linear 4s infinite;
}

.card-container {
    position: relative;
    max-width: 400px;
    width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cardswitch_img {
    display: block;
    max-width: 300px;
    position: absolute;
    filter: drop-shadow(6px 22px 17px rgba(0,0,0,.35));
}

@media screen and (max-width: 768px) {
    .card-container {
        min-height: 200px;
    }
}