.carousel {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
    width: 100%;
    margin-top: 2.5rem;
}

.carousel-viewport {
    overflow: hidden;
    width: 100%;
}

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

.carousel-item {
    min-width: 25%;
    flex-shrink: 0;
    text-align: center;
}

.carousel-item img {
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
}

@media only screen and (max-width: 64rem) {
    .carousel-item {
        min-width: 50%;
    }
}

@media only screen and (max-width: 48rem) {
    .carousel-item {
        min-width: 100%;
    }
}