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 (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: 100vw;
    height: var(--heightDesktop, 700px);
    object-fit: cover;
    object-position: var(--imagePosition);

    @media (max-width: 777px) {
        height: var(--heightMobile, 600px);
    }
}

coretex-slideshow [slideshow-slide] .meta {
    --colorHeadings: var(--slideMetaHColor); 
    --buttonColor: var(--slideMetaHColor); 
    --buttonBgColor: var(--slideMetaHBg); 

    color: var(--slideMetaHColor); 
    position: absolute; 
    padding: var(--padding);

    @media (max-width: 777px) {
        bottom: 0; left: 0;
    }
}

coretex-slideshow slider-controls {
    display: block;
    padding: var(--margin);

    [control-dots] { gap: var(--margin) }
    
    button.control-dot {
        --buttonBgColor: transparent;
        --buttonPadding: 0.4rem;
        --buttonRadius: 100vw;
        border: var(--globalBorder);
        width: 0.4rem;
        height: 0.4rem;

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