swiper-container {
    --swiper-theme-color: var(--ion-color-primary, #3880ff);
    --swiper-pagination-bullet-inactive-color: var(--ion-color-step-200, #cccccc);
    --swiper-pagination-color: var(--swiper-theme-color);
    --swiper-pagination-progressbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.25);
    --swiper-scrollbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);
    --swiper-scrollbar-drag-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.5);
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    // CSS Grid/Flexbox bug size workaround
    // @see https://github.com/kenwheeler/slick/issues/982
    // @see https://github.com/nolimits4web/swiper/issues/3599
    min-height: 0;
    min-width: 0;

    swiper-slide {
        display: flex;
        position: relative;

        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;

        width: 100%;
        height: 100%;

        font-size: 18px;

        text-align: center;
        box-sizing: border-box;

        img {
            width: auto;
            max-width: 100%;
            height: auto;
            max-height: 100%;
        }
    }
}


// To make core-swipe-slides fill the remaining height.
.core-swipe-slides-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 100%;

    core-swipe-slides {
        display: flex;
        flex-direction: column;
        flex-grow: 1;

        swiper-container {
            flex-grow: 1;
            max-width: 100%;
        }
    }
}