:root {
    --carousel-max-width: 28.5%;
}

.carousel-background-color {
    background: linear-gradient(to bottom, #1004A833, #1004A814);
}

.carousler-wrapper {
}

.carousel-item {
}


.carousel-indicators [data-bs-target] {
    height: 10px;
    width: 10px;
    border-radius: 100%;
    background-color: #a7a6a6;
    transition: none;
}

    .carousel-indicators [data-bs-target].active {
        width: 48px;
        height: 12px;
        background: url("../src/carousel_indicator_active.svg");
        background-repeat: no-repeat;
        border-radius: 0;
    }



/*multi item carousel*/
.multi-item-carousel {
    overflow: hidden;
    width: 100%;
}

    /* hide clones of neighboring slides on mobile */
    .multi-item-carousel .item__third:first-child,
    .multi-item-carousel .item__third:last-child {
        display: none;
    }

    .multi-item-carousel .carousel-inner {
        width: 150%;
        height: 320px;
        left: -13.555%;
    }

    /* slides receive these classes only while moving */
    .multi-item-carousel .carousel-item-next:not(.carousel-item-start),
    .multi-item-carousel .carousel-item-end.active {
        -webkit-transform: translate3d(800px, 0, 0);
        transform: translate3d(800px, 0, 0);
        -moz-transform: translate3d(28.5%, 0, 0);
        -ms-transform: translate3d(28.5%, 0, 0);
        -o-transform: translate3d(28.5%, 0, 0);
        -webkit-transform: translate3d(28.5%, 0, 0);
        transform: translate3d(28.5%, 0, 0);
    }

    .multi-item-carousel .carousel-item-prev:not(.carousel-item-end),
    .multi-item-carousel .carousel-item-start.active {
        -webkit-transform: translate3d(-800px, 0, 0);
        transform: translate3d(-800px, 0, 0);
        -moz-transform: translate3d(-28.5%, 0, 0);
        -ms-transform: translate3d(-28.5%, 0, 0);
        -o-transform: translate3d(-28.5%, 0, 0);
        -webkit-transform: translate3d(-28.5%, 0, 0);
        transform: translate3d(-28.5%, 0, 0);
    }

    /* now the content of the current slide occupies only a third of it between the clones of two adjacent slides */
    .multi-item-carousel .item__third {
        display: block !important;
        float: left;
        position: relative;
        /*captions can now be added*/
        /*width: 33.33333333%;*/
        width: 800px;
        width: var(--carousel-max-width);
        text-align: center;
        align-content: center;
    }

.item__third > div {
    margin:0 10px;
    min-height: 250px;
    max-height: 250px;
    text-align: center;
    align-content: center;
    border-radius: 10px;
    background-color: white;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding:10px;
}

.carousel-image-wrapper{
    max-height:200px;
    max-width:400px;
}

.carousel-image-wrapper>img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

    .item__third > div > div {
        flex-grow: 1;
        flex-shrink:1;
        flex-basis: 25.5%;
    }

.multi-item-carousel .item__third:first-child,
.multi-item-carousel .item__third:last-child {
    display: none;
}

@media (min-width: 500px) {

    /*.multi-item-carousel .carousel-control-prev,
    .multi-item-carousel .carousel-control-next {
        background: rgba(255, 255, 255, 0.3);
        width: 25%;
        z-index: 11;*/ /* .carousel-caption has z-index 10 */
    /*}*/

    /*.multi-item-carousel .carousel-inner {
        width: 150%;
        height: 320px;
        left: -13.555%;
    }*/

    /* slides receive these classes only while moving */
    /*.multi-item-carousel .carousel-item-next:not(.carousel-item-start),
    .multi-item-carousel .carousel-item-end.active {
        -webkit-transform: translate3d(800px, 0, 0);
        transform: translate3d(800px, 0, 0);

        -moz-transform: translate3d(28.5%, 0, 0);
        -ms-transform: translate3d(28.5%, 0, 0);
        -o-transform: translate3d(28.5%, 0, 0);
        -webkit-transform: translate3d(28.5%, 0, 0);
        transform: translate3d(28.5%, 0, 0);
    }

    .multi-item-carousel .carousel-item-prev:not(.carousel-item-end),
    .multi-item-carousel .carousel-item-start.active {
        -webkit-transform: translate3d(-800px, 0, 0);
        transform: translate3d(-800px, 0, 0);

        -moz-transform: translate3d(-28.5%, 0, 0);
        -ms-transform: translate3d(-28.5%, 0, 0);
        -o-transform: translate3d(-28.5%, 0, 0);
        -webkit-transform: translate3d(-28.5%, 0, 0);
        transform: translate3d(-28.5%, 0, 0);
    }*/

    /* now the content of the current slide occupies only a third of it between the clones of two adjacent slides */
    /*.multi-item-carousel .item__third {
        display: block !important;
        float: left;
        position: relative;*/
    /*captions can now be added*/
    /*width: 33.33333333%;*/
    /*width: 800px;
        width: 28.5%;
        text-align: center;
        align-content: center;
    }

    .item__third div {
        margin-left: 10px;
        margin-right: 10px;
        min-height: 250px;
        max-height:250px;
        text-align: center;
        align-content: center;
        border-radius: 10px;
        background-color: white;
    }

    .multi-item-carousel .item__third:first-child,
    .multi-item-carousel .item__third:last-child {
        display: none;
    }*/
}