.film-strip-slider {
    height: auto;
    overflow: visible;
    margin-bottom: 1.5rem;
    padding-bottom: 2rem;
}

.film-strip-slider .carousel-inner {
    padding-bottom: .75rem;
}

.film-strip-slider > .carousel-control-prev {
    left: -4.5%;
    padding-right: 0;
    justify-content: left;
}

.film-strip-slider > .carousel-control-next {
    right: -4.5%;
}

.film-strip-control-next,
.film-strip-control-prev {
    position: absolute;
    /* top: 89%; */
    bottom: 6%;
    left: 15%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    padding: 0;
    color: hsl(0, 0%, 100%);
    text-align: center;
    background: 0 0;
    border: 0;
    opacity: 0.5;
    transition: opacity .15s ease;
}

.film-strip-gallery-control-prev,
.film-strip-gallery-control-next {
    position: relative;
    top: 1.5rem;
    /* left: 15%; */
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    padding: 0;
    /* margin-top: 0.25rem; */
    color: hsl(0, 0%, 100%);
    text-align: center;
    background: 0 0;
    border: 0;
    opacity: 0.5;
    transition: opacity .15s ease;
}

button.carousel-control-prev.film-strip-gallery-control-prev,
button.carousel-control-prev.film-strip-control-prev {
    position: absolute;
    height: 2rem;
    /* top: 0; */
    bottom: var(--carousel-indicators-y);
    left: var(--carousel-control-next-x);
    right: 0;
}

button.carousel-control-next.film-strip-gallery-control-next,
button.carousel-control-next.film-strip-control-next {
    position: absolute;
    height: 2rem;
    /* top: 0; */
    bottom: var(--carousel-indicators-y);
    left: calc(var(--carousel-control-prev-x) + 1.5rem);
    /* right: 81.7%; */
}

.film-strip-gallery-button {
    position: absolute;
    width: 250px;
    height: 2.5rem;
    display: flex;
    right: var(--carousel-control-next-x);
    /* top: 0; */
    bottom: 0;
    justify-content: center;
    font-size: 95%;
    min-width: max-content;
    max-width: calc(100% - .5rem);
    margin-top: 1.2rem;
    margin-bottom: 1.2rem;
}

.film-strip-gallery-control-wrapper {
    /* background-color: var(--brown); */
    position: relative;
    height: 5rem;
}

.film-strip-gallery-control-wrapper.white-background {
    background-color: var(--white);
}

.film-strip-gallery-control-wrapper.cream-background {
    background-color: var(--cream);
}

.film-strip-gallery-control-wrapper.orange-background {
    background-color: var(--orange);
}

.film-strip-gallery-control-wrapper.red-background {
    background-color: var(--red);
}

.film-strip-gallery-control-wrapper.brown-background {
    background-color: var(--brown);
}

.film-strip-gallery-control-wrapper.black-background {
    background-color: var(--black);
}

.film-strip-filter > img {
    filter: brightness(0.5);
}

.film-strip-caption>.carousel-caption {
    position: absolute;
    top: 15%;
    right: 15%;
    bottom: 15%;
    left: 15%;
    text-align: unset;
    vertical-align: middle;
    height: -webkit-fill-available;
}

film-strip-caption>.carousel-caption>h1 {
    font-size: 170%;
}

.film-strip-slider>.carousel-indicators {
    bottom: 0;
}

.film-strip-slider>.carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 13px;
    height: 13px;
    padding: 0;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: var(--white);
    background-clip: padding-box;
    border: 2px;
    border: 2px solid var(--blue);
    opacity: 1;
    transition: opacity .6s ease;
    border-radius: 100%;
}

.film-strip-slider>.carousel-indicators :not[aria-current="true"] {
    background-color: var(--red);
    outline: var(--blue);
}

.film-strip-slider>.carousel-indicators .active {
    background-color: var(--blue);
    opacity: 1;
}

/* Mobile carousel styles for film-strip-slider */
@media screen and (max-width: 380px) {
    
    .film-strip-slider {
        height: 525px;
    }

    .film-strip-slider>.carousel-indicators {
        bottom: -1rem;
    }

    .film-strip-slider>.carousel-indicators [data-bs-target] {
        display: none;
    }
}

@media screen and (min-width: 381px) and (max-width: 431px) {
    
    .film-strip-slider {
        height: 590px;
    }

    .film-strip-slider>.carousel-indicators {
        bottom: -1rem;
    }

    .film-strip-slider>.carousel-indicators [data-bs-target] {
        display: none;
    }
}

@media screen and (min-width: 431px) and (max-width: 541px) {

    .film-strip-slider {
        height: 678px;
    }

    .film-strip-slider>.carousel-indicators {
        bottom: -1rem;
    }

    .film-strip-slider>.carousel-indicators [data-bs-target] {
        display: none;
    }
}

/* Mobile carousel styles for film-strip-slider */
@media screen and (max-width: 768px) {
    .film-strip-slider {
        position: relative;
        overflow: hidden !important;
        touch-action: pan-y pinch-zoom;
    }
    
    .film-strip-slider .carousel-inner {
        overflow: visible !important;
        display: flex;
        position: relative;
        width: 100%;
        transform: translateX(0);
        will-change: transform;
    }
    
    .film-strip-slider .carousel-inner.dragging {
        transition: none !important;
    }
    
    .film-strip-slider .carousel-inner:not(.dragging) {
        transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    .film-strip-slider .carousel-item {
        flex: 0 0 80%;
        width: 80% !important;
        margin-right: 0.5rem;
        position: relative;
        display: block !important;
    }
    
    /* Last item should be 20% when it's in peek position */
    .film-strip-slider .carousel-item:last-child {
        margin-right: 0;
    }
    
    /* Disable Bootstrap's default carousel transitions */
    .film-strip-slider .carousel-item.active,
    .film-strip-slider .carousel-item-next,
    .film-strip-slider .carousel-item-prev {
        transform: none !important;
    }
    
    .film-strip-slider .carousel-item-next:not(.carousel-item-start),
    .film-strip-slider .carousel-item-prev:not(.carousel-item-end),
    .film-strip-slider .active.carousel-item-end,
    .film-strip-slider .active.carousel-item-start {
        transform: none !important;
    }

    .film-strip-slider>.carousel-indicators {
        bottom: -1rem;
    }

    .film-strip-slider>.carousel-indicators [data-bs-target] {
        display: none;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .film-strip-slider>.carousel-indicators [data-bs-target] {
        display: none;
    }

    .film-strip-slider .carousel-item {
        width: 100% !important;
    }
}

@media screen and (min-width: 1025) and (max-width: 1920px) {
    .film-strip-slider>.carousel-indicators [data-bs-target] {
        display: none;
    }

    .film-strip-slider .carousel-item {
        width: 100% !important;
    }
}