:root {
    --carousel-gutter-x: 2.5rem;
    --carousel-primary: rebeccapurple;
    --carousel-mobile-breakpoint: 768px;
}

[class^="col-"]:has(> .slides) {
    height: 100%;  
}

.slides {
    max-height: 25rem;

    @media (max-width: var(--carousel-mobile-breakpoint)) {
        max-height: none;
        height: 100%;
    }

    &.glide-slider {
        position: relative;
        overflow: hidden;

        .glide__track,
        .glide__slides,
        .glide__slide {
            max-height: inherit;
            height: unset;

            @media (max-width: var(--carousel-mobile-breakpoint)) {
                height: 100%;
            }
        }

        .slide-controls {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 5;

            &__btn {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                pointer-events: auto;
                background: rgba(0, 76, 139, 0.7);
                border: none;
                border-radius: 50%;
                width: 2.5rem;
                height: 2.5rem;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                transition: all 0.2s;

                &:hover {
                    background: rgba(0, 76, 139, 0.9);
                }

                @media (max-width: var(--carousel-mobile-breakpoint)) {
                    top: -1rem;
                    transform: translateY(-100%);
                }

                svg {
                    width: 0.75rem;
                    height: auto;
                }

                &--prev {
                    left: 0.75rem;
                    svg {
                        margin-right: 0.1rem;
                    }

                    @media (max-width: var(--carousel-mobile-breakpoint)) {
                        left: initial;
                        right: 3.75rem;
                    }
                }

                &--next {
                    right: 0.75rem;

                    svg {
                        margin-left: 0.1rem;
                    }
                }
            }
        }


        .slide-item {
            picture {
                display: block;
                width: 100%;
                height: 100%;
                line-height: 0;
            }

            .slide-item__image {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
            }

            .slide-item__media-wrapper {
                position: relative;
                height: 100%;

                &.no-content {
                    .slide-item__overlay {
                        background: transparent;
                    }
                }

                video {
                    display: block;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: center;
                    aspect-ratio: 16 / 9;

                    @media (max-width: var(--carousel-mobile-breakpoint)) {
                        aspect-ratio: 4 / 3;
                    }
                }

                &.slide-item__media-filter {
                    background-color: var(--carousel-primary);

                    @media (max-width: var(--carousel-mobile-breakpoint)) {
                        background-color: transparent;
                    }

                    video, picture {
                        opacity: 0.3;

                        @media (max-width: var(--carousel-mobile-breakpoint)) {
                            opacity: 1;
                        }
                    }
                }
            }

            .slide-item__overlay {
                position: absolute;
                bottom: 50%;
                left: 0;
                right: 0;
                transform: translateY(50%);
                padding: 2rem 1.5rem 1.5rem;
                color: white;
                pointer-events: none;

                &-button {
                    pointer-events: auto;

                    @media (max-width: var(--carousel-mobile-breakpoint)) {
                        font-size: 0.8rem !important;
                    }
                }

                @media (max-width: var(--carousel-mobile-breakpoint)) {
                    position:relative;
                    transform: none;
                    background: var(--carousel-primary);
                    padding: 0.5rem 1rem 1rem 1rem;
                    margin-top: -3rem;
                    margin-right: calc(var(--carousel-gutter-x) * 0.5);
                    margin-left: calc(var(--carousel-gutter-x) * 0.5);
                }
            }
        }
    }
}