.slidePrev {
    background: none !important;
    align-self: center;
    z-index: 1;
    border: none;
}

.slideNext {
    justify-self: end;
    align-self: center;
    z-index: 999;
}

.carousel-button {
    z-index: 2;
    cursor: pointer;
}

.mycarousel-button button {
    background: none;
    border: none
}

.mycarousel-button:hover,
.mycarousel-button:focus {
    color: red;
    background-color: rgba(0,0,0, .2);
}

.mycarousel-button:focus {
    outline: 1px solid black;
}

.sliderContainer {
    display: flex;
    gap: 0.5rem;
    overflow: hidden;
}



.snapInline {
    scroll-snap-type: x mandatory;
}

    .snapInline > * {
        scroll-snap-align: start;
    }



.mySlider {
    display: grid;
    grid-template-columns: 1fr 100fr 1fr;
    width: 100%;
    gap: 10px;
    padding: 20px;
    align-items: center;
}

.grid-item {
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
}

.cards-container {
    overflow: hidden;
    width: 99%; /* Adjust based on the number of visible cards */
}

.slideCard {
    padding: 10px 0px;
    display: flex;
    gap: 10px;
    transition: transform 0.5s ease-in-out;
    scroll-snap-type: x mandatory;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    scroll-behavior: smooth;
}

.sliderCard {
    text-align: center;
    width: 300px; /* Fixed width for each card */
    height: 400px;
    flex: 0 0 auto;
    box-sizing: border-box;
    scroll-snap-align: start;
}

@keyframes slidePrevious {
    from {
        transform: translateX(0px);
    }

    to {
        transform: translateX(-304px);
    }
}

@keyframes slideNext {
    from {
        transform: translateX(-608px);
    }

    to {
        transform: translateX(-304px);
    }
}

.cardsContainerPrevious {
    animation: slidePrevious 0.5s ease-in;
    transform: translateX(-304px);
}

.cardsContainerNext {
    animation: slideNext 0.5s ease-in;
    transform: translateX(-304px);
}

.cardsContainerInit {
    transform: translateX(-304px);
}