/* 
Base code for the carousel effect from Coding2GO
Carousel modified by EricDonaldo
Any other code from EricDonaldo
*/
.carousel-container {
    margin-left: 10px;
    margin-right: 10px;
}

.carousel {
    margin: 0px auto;
    width: 100%;
    display: flex;
    overflow-x: auto;
}

.tiltcard {
    width: clamp(200px, 32vw, 580px);
    height: clamp(300px, 42vw, 680px);
    margin: 20px 20px;
    background: linear-gradient(#fff2, transparent);

    border-radius: 10px;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25);

    color: white;

    transition: transform 0.35s ease, box-shadow 0.35s ease, position 0.35s ease, top 0.35s ease, left 0.35s ease, z-index 0.35s ease;
}

.tiltcard.expanded {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.4);
    z-index: 997;
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.5);
}

.carousel::-webkit-scrollbar {
    display: none;
}

.group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    animation: spin 12s infinite linear;
    padding-right: 1em;
}

.group.paused {
    animation-play-state: paused;
}

@keyframes spin {
    from {
        translate: 0;
    }

    to {
        translate: -100%
    }
}