#carousel-container
{
    height: 35rem;
    box-sizing: content-box; // Override global to avoid unnecessary image cropping
    overflow: hidden;
    position: relative;
}

.carousel-panel
{
    transition: {
        property: transform;
        duration: 1s;
        timing-function: linear;
    }
    transform: translateX(100%);
    position: absolute;
    z-index: -15;
}

.carousel-panel img
{
    width: 100%;
    height: auto;
    box-sizing: content-box;
}

.carousel-current-panel
{
    transform: translateX(0) !important;
    z-index: -10;
}

.carousel-previous-panel
{
    transform: translateX(-100%) !important;
}

#carousel-container
{
    height: 35rem;
    box-sizing: content-box; // Override global to avoid unnecessary image cropping
    overflow: hidden;
    position: relative;
}

.carousel-panel
{
    transition: {
        property: transform;
        duration: 1s;
        timing-function: linear;
    }
    transform: translateX(100%);
    position: absolute;
    z-index: -15;
}

.carousel-panel img
{
    width: 100%;
    height: auto;
    box-sizing: content-box;
}

.carousel-current-panel
{
    transform: translateX(0) !important;
    z-index: -10 !important;
}

.carousel-previous-panel
{
    transform: translateX(-100%) !important;
    z-index: -14 !important;
}

Fix case weird overlapping thing
Fix case weird overlapping thing

The last carousel panel would have a higher z-index than the carousel-previous-panel but lower z-index than the carousel-current-panel. This made a strange appearance when the last panel lost the carousel-previous-panel class and returned to the right side of the page from the left.
