section.slideShow {
    coretex-slideshow {
        display: block;
        position: relative;
        overflow: clip;
        width: 100%;
        border-bottom: var(--globalBorder);
    }

    coretex-slideshow li { margin: 0 }

    coretex-slideshow [slideshow-container] {
        display: flex;
        align-items: flex-start;
        transition: height 250ms ease-in-out;

        max-height: var(--heightDesktop);

        @media (min-width: 1920px) { max-height: var(--heightMonitor) }
        @media (max-width: 777px) { max-height: var(--heightMobile) }
    }

    @media(min-width: 778px) { coretex-slideshow[auto-height~="desktop"] [slideshow-slide] img { height: fit-content } }
    @media(max-width: 777px) { coretex-slideshow[auto-height~="mobile"] [slideshow-slide] img { height: fit-content } }

    coretex-slideshow [slideshow-slide] { position: relative; flex: 0 0 100%; user-select: none; }

    coretex-slideshow [slideshow-slide] img {
        width: 100%;
        height: var(--heightDesktop, 700px);
        object-fit: cover;
        object-position: var(--imagePosition);

        @media (min-width: 1920px) { height: var(--heightMonitor, 700px) }
        @media (max-width: 777px) { height: var(--heightMobile, 600px) }
    }

    coretex-slideshow [slideshow-slide] video {
        width: 100%;
        height: var(--heightDesktop, 700px);
        object-fit: cover;
        object-position: var(--imagePosition);

        @media (min-width: 1920px) { height: var(--heightMonitor, 700px) }
        @media (max-width: 777px) { height: var(--heightMobile, 600px) }
    }

    coretex-slideshow svg.svgph { height: fit-content }

    coretex-slideshow [slideshow-slide] .meta {
        padding: var(--padding);
        pointer-events: none;

        & > x-flex { height: 100% }
    }

    coretex-slideshow slider-controls {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: block;
        padding: 0;
        border: none;
        pointer-events: none;

        .paginationNav { height: 100%; position: relative; }

        x-cell[order="1"],
        x-cell[order="3"] {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: auto;
        }
        x-cell[order="1"] { left: var(--padding); }
        x-cell[order="3"] { right: var(--padding); }

        i.g-arrowLeft,
        i.g-arrowRight,
        i.g-arrowLeft svg,
        i.g-arrowRight svg,
        i.g-arrowLeft path,
        i.g-arrowRight path {
            color: #fff;
            fill: #fff;
        }

        x-cell[order="2"] {
            position: absolute;
            left: 50%;
            bottom: 1.5rem;
            transform: translateX(-50%);
            pointer-events: auto;
        }

        [control-dots] { gap: var(--padding) }

        button.control-dot {
            --buttonPadding: var(--space-0);
            --buttonRadius: 100vw;

            background: transparent;
            border: var(--globalBorderSafe);
            width: .5rem;
            height: .5rem;

            &.is-selected { background: var(--color) }
        }
    }

    coretex-slideshow [slideshow-slide] .meta x-flex > x-cell {
        text-align: var(--textAlignDesktop, left);

        @media (max-width: 777px) {
            text-align: var(--textAlignMobile, center);
        }

        p {
            font-size: 1.6rem;
            color: #ffffff;
        }

        @media (max-width: 777px) {
            p {
                font-size: 1.3rem;
                color: #ffffff;
            }
        }
    }
}