.carousel {
    width: 80%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.carousel-track-container {
    overflow: hidden;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    will-change: transform;
}

.carousel-item {
    min-width: 16.66%; /* Adjust based on how many items you want visible */
    box-sizing: border-box;
    padding: 10px;
    text-align: center;
}

.carousel-item img {
    width: 100%;
    height: 75%;
}

.carousel-item:hover {
    opacity: .75;
}

.carousel-item p {
    margin-top: 10px;
    font-size: 16px;
    color: #333;
}

button.prev, button.next {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    padding: 10px;
    cursor: pointer;
    z-index: 1;
    /* width: 20%;
    height: 20%; */
}

button.prev {
    left: 0;
}

button.next {
    right: 0;
}

button.prev:hover, button.next:hover {
    background-color: rgba(0, 0, 0, 0.65);
}

/* FOR FAVORITED QUESTIONS */

.carousel-favorite {
    width: 80%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.carousel-track-container-favorite {
    overflow: hidden;
}

.carousel-track-favorite {
    display: flex;
    transition: transform 0.5s ease-in-out;
    will-change: transform;
}

.carousel-item-favorite {
    min-width: 50%; /* Adjust based on how many items you want visible */
    box-sizing: border-box;
    padding: 10px;
    text-align: center;
}

.carousel-item-favorite p {
    margin-top: 10px;
    font-size: 16px;
    color: #333;
}

/* CAUROSEL ARTICLES */
.carousel-item-article {
    min-width: 100%; /* Adjust based on how many items you want visible */
    box-sizing: border-box;
    padding: 10px;
    text-align: center;
}

/* MOBILE */

@media (max-width: 1750px) {
    .carousel-item {
        min-width: 20%;
    }
}

@media (max-width: 1100px) {
    .carousel-item-favorite {
        min-width: 100%;
    }
}

@media (max-width: 1475px) {
    .carousel-item {
        min-width: 25%;
    }
}

@media (max-width: 1250px) {
    .carousel-item {
        min-width: 33%;
    }
}

@media (max-width: 900px) {
    .carousel-item {
        min-width: 50%;
    }
}

@media (max-width: 500px) {
    .carousel-item {
        min-width: 100%;
    }
    .prev, .next, .arrow {
        width: 13%;
        height: 20%;
    }
}