@import 'controls.css';
@import 'smooth.css';

.coverflow-carousel {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.carousel-container {
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}

.carousel-container:has(.carousel-smooth-item) {
    width: 100%;
}

.carousel-container:has(.carousel-smooth-item:only-child) {
    width: auto;
}

.carousel-pagination {
    display: flex;
    margin: 0 20px;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
}

@media (max-width: 1024px),
    (max-width: 960px),
    (max-width: 480px) {
    .carousel-container {
        height: 360px;
    }

    .carousel-pagination {
        display: none;
    }
}