.slider-container {
    --slider-height           : 500px;
    --slider-width            : 350px;

    --slider-caption-bg       : linear-gradient(to bottom, transparent  0%, hsl(0 0 0 / 65%) 80%);
    --slider-caption-bg-hover : linear-gradient(to bottom, transparent 10%, hsl(0 0 0 / 85%) 40%);
    --slider-caption-color    : #fff;
    --slider-caption-padding  : 1em 2em 3em;

    margin    : auto;
    width     : var(--slider-width);
    height    : var(--slider-height);
    overflow  : clip;
    position  : relative;

    &:has(:hover) {
        .navigation {
            .nav-button,
            .nav-dots  {
                opacity: 1;
            }
        }
        .slides .slide .slide-caption {
            translate: 0 0;
            &::before { top: 0; }
        }
    }

    h3, p {
        margin: 0 ;
    }
    p {
        font-size : 75%;
        opacity   : 0.6;
    }

    .slide,
    .nav-button,
    .nav-dots  {
        transition : opacity .3s;
        z-index    : 1;
    }

    .slider-title {
        margin-bottom : 0.5em;
        margin-top    : 0;

        + .slider-description {
            color      : #888;
            margin-top : 0;
        }
    }

    .slides {
        border-radius : 0.5em;
        display       : flex;
        min-height    : var(--slider-height);
        overflow      : hidden;
        position      : relative;
        z-index       : 0;

        .slide {
            background-position : center;
            background-size     : cover;
            opacity             : 0;
            position            : absolute;
            transition          : transform 0.5s cubic-bezier(0.42, 0, 0.58, 1);

            &.active { opacity: 1; }

            .slide-content {
                align-items : start;
                display     : flex;
                max-height  : 100%;
                position    : relative;
                z-index     : 5000;

                img, video, iframe {
                    min-height : var(--slider-height);
                    min-width  : var(--slider-width);
                    object-fit : cover;
                }
            }

            .slide-caption {
                background-image : var(--slider-caption-bg);
                bottom           : 0;
                color            : var(--slider-caption-color);
                left             : 0;
                opacity          : 1;
                padding          : var(--slider-caption-padding);
                position         : absolute;
                text-shadow      : 1px 2px black;
                transition       : translate .3s;
                translate        : 0 100%;
                width            : 100%;
                z-index          : 1;

                &::before {
                    background-image : var(--slider-caption-bg-hover);
                    content          : "";
                    inset            : 100% 0 0;
                    position         : absolute;
                    transition       : inset .2s ease;
                }

                > * {
                    position : relative;
                    z-index  : 1;
                }

                a {
                    color : currentColor
                }
            }
            .slide-caption:hover::before {
                background-image: var(--slider-caption-bg-hover);
                top: -2lh;
            }
        }
    }

    .navigation {
        display         : flex;
        justify-content : center;

        .nav-dots {
            bottom     : 10px;
            opacity    : 1;
            position   : absolute;
            display    : flex;
            gap        : 10px;

            .dot {
                background-color : var(--col-whitest, rgba(0, 0, 0, 0.5));
                border-radius    : 50%;
                cursor           : pointer;
                display          : inline-block;
                height           : 10px;
                width            : 10px;
                transition: all .2s;
                border: solid 1px black;
                box-shadow: 0 0 0 1px color-mix(in hsl, white, transparent 80%);

                &.active {
                    background-color : var(--col-base, #717171);
                    outline: solid 1px white;
                    scale   : 1.2;
                    box-shadow: 0 0 0 1px color-mix(in hsl, white, transparent 20%);
                }

                &:hover {
                    outline : solid 1px white;
                    scale   : 1.3;
                }
            }
        }

        .nav-button {
            background-color : color-mix(in hsl, black, transparent 50%);
            border           : none;
            color            : white;
            cursor           : pointer;
            opacity          : 0;
            padding          : 15px;
            position         : absolute;
            top              : 50%;
            translate        : 0 -50%;
            transition: all .2s;
            outline: solid 0px transparent;

            &.next { right: 10px }
            &.prev { left : 10px }

            &:hover {
                background-color: color-mix(in hsl, black, transparent 20%);
                outline: solid 1px white;
            }
        }
    }
}