



[data-ec-toggle=responsive-carousel] .carousel-inner .carousel-item.active,
[data-ec-toggle=responsive-carousel] .carousel-inner .carousel-item-next,
[data-ec-toggle=responsive-carousel] .carousel-inner .carousel-item-prev {
    display: flex;
    justify-content: space-around
}

[data-ec-toggle=responsive-carousel] .carousel-inner .carousel-item img {
    max-width: 100%;
    max-height: 300px;
    /* custom */
    margin-bottom: .5rem !important;
}

[data-ec-toggle=responsive-carousel] .carousel-inner-50 .carousel-item img {
    max-width: 100%;
    max-height: 100px;
    /* custom */
    margin-bottom: .5rem !important;
}

/* begin::custom */
[data-ec-toggle=responsive-carousel] {
    height: auto;
    margin: auto;
}

    [data-ec-toggle=responsive-carousel] .carousel-item {
        height: auto;
    }

    [data-ec-toggle=responsive-carousel] .carousel-inner .carousel-item div {
        padding: 1rem;
        text-align: center;
    }

        [data-ec-toggle=responsive-carousel] .carousel-inner .carousel-item div > p {
            /* limit to 3 lines */
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

    [data-ec-toggle=responsive-carousel] .carousel-control-next,
    [data-ec-toggle=responsive-carousel] .carousel-control-prev {
        width: auto;
    }

/* end::custom */

[data-ec-thumbnail=slider] .carousel-inner .carousel-item img {
    max-width: 100%;
    height: auto;
    /* custom */
    margin-bottom: .5rem !important;
}

[data-ec-thumbnail=gallery] .carousel-inner .carousel-item img {
    width: 100%;
    display: block;
    /* custom */
    margin-bottom: .5rem !important;
}

[data-ec-thumbnail=gallery] .carousel-indicators {
    position: unset;
    margin: auto;
    align-items: center
}

    [data-ec-thumbnail=gallery] .carousel-indicators div {
        padding: .3em
    }

        [data-ec-thumbnail=gallery] .carousel-indicators div > * {
            width: 100%;
            height: auto
        }

    [data-ec-thumbnail=gallery] .carousel-indicators [data-bs-target] {
        height: auto
    }

@media(max-width: 1200px) {
    [data-ec-toggle] .carousel-inner .carousel-item > div {
        display: none
    }
}

@media(max-width: 1200px) and (min-width: 768px) {
    [data-ec-toggle=responsive-carousel] .carousel-inner .carousel-item > div:nth-child(-n+3) {
        display: block
    }

    [data-ec-toggle=responsive-carousel] .carousel-inner .carousel-item-next, 
    [data-ec-toggle=responsive-carousel] .carousel-inner .carousel-item-end.active {
        transform: translateX(33.33%);
        transition: transform .5s linear
    }

    [data-ec-toggle=responsive-carousel] .carousel-inner .carousel-item-start.active, 
    [data-ec-toggle=responsive-carousel] .carousel-inner .carousel-item-prev {
        transform: translateX(-33.33%);
        transition: transform .5s linear
    }

    [data-ec-toggle=responsive-carousel] .carousel-inner .carousel-item-end, 
    [data-ec-toggle=responsive-carousel] .carousel-inner .carousel-item-start {
        transform: translateX(0)
    }
}

@media(max-width: 767px) {
    [data-ec-toggle=responsive-carousel] .carousel-inner .carousel-item > div:nth-child(-n+2) {
        display: block
    }

    [data-ec-thumbnail] [data-ec-toggle=responsive-carousel] .carousel-inner .carousel-item > div:nth-child(-n+1) {
        display: block
    }
}

@media(min-width: 767px) {
    [data-ec-toggle=responsive-carousel] .carousel-item {
        transition: none;
    }
}
