/*
    Block: Gallery Carousel
    Note: Selectors must start with .block-gallery-carousel
*/

@layer blocks {
    .block-gallery-carousel .swiper-slide img {
        -o-object-fit: cover;
           object-fit: cover;
        width: 100%;
        height: 100%;
        position: relative;
    }

    .block-gallery-carousel .swiper-slide {
        position: relative;
    }

    .block-gallery-carousel .swiper-slide::after {
        content:"";
        background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.5)));
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.5) 100%);
        position:absolute;
        inset: 0;
    }

    .block-gallery-carousel .swiper {
        position: relative;
        aspect-ratio: 1.818;
        max-height: calc(100vh - var(--header-height, 0px) - 2.5rem);
        max-height: calc(100dvh - var(--header-height, 0px) - 2.5rem);
    }

    .block-gallery-carousel .swiper-pagination-progressbar {
        position: absolute;
        left: 3.75rem;
        bottom: 3.125rem;
        top: auto;
    }

    .block-gallery-carousel .swiper-navigation {
        position: absolute;
        right: 2.0625rem;
        bottom: 2.5rem;
    }

    @media screen and (width <= 920px) {
        .block-gallery-carousel .swiper {
            aspect-ratio: 0.86;
        }
        .block-gallery-carousel .swiper-pagination-progressbar {
            left: 50%;
            -webkit-transform: translateX(-50%);
                -ms-transform: translateX(-50%);
                    transform: translateX(-50%);
            bottom: 1.5625rem;
        }
    }

    @media screen and (width <= 620px) {
        .block-gallery-carousel .swiper {
            aspect-ratio: 0.66;
        }
    }
}