/* START CAROUSEL */
.carousel-content.grey {
    background-color: var(--background-list-grey);
}

.carousel-content.dark-grey {
    background-color: var(--background-list-dark-grey);
}

.carousel.desktop-view {
    position: relative;
    width: 100%;
    padding: 0 0 40px;
}

.carousel.mobile-view {
    display: none;
}

.carousel .inner-carousel {
    height: 400px;
    width: 100%;
    overflow: hidden;
}

/* Wrapper for slides */
.carousel .carousel-slides-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

/* Single slide */
.carousel .carousel-slide {
    display: flex;
    flex: 0 0 100%;
    justify-content: space-around;
    height: 100%;
}

.carousel .carousel-images {
    display: flex;
    width: 100%;
    height: 100%;
}

.carousel .carousel-images .image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
}

.carousel .carousel-images .image.large {
    flex: 46%;
}

.carousel .carousel-images .image.small {
    flex: 27%;
}

/* Navigation */
.carousel .carousel-navigation {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 0 32px;
    max-width: 1316px;
    margin: 16px auto 0;
    width: 100%;
}

.nav-button {
    position: relative;
    height: 3px;
    background-color: #d4dde4;
    cursor: pointer;
    overflow: hidden;
    max-width: 80px;
    width: 20%;
}

.nav-button .progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #000000;
    width: 0;
    transition: width 5s linear;
}

.nav-button.active .progress-bar {
    width: 100%;
}

/* Tablet */
@media (max-width: 767px) {
    /* Inner carousel */
    .carousel .inner-carousel {
        height: 216px;
    }
}

/* Mobile - 600px */
@media (max-width: 576px) {
    /* Carousel */
    .carousel.desktop-view {
        display: none;
    }

    .carousel.mobile-view {
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
        overflow: hidden;
        height: 100%;
        padding: 0 0 40px;
    }

    .carousel .carousel-navigation {
        padding: 0 16px;
    }
}
/* END CAROUSEL */