div.slider{
    display: grid;
    grid-template-columns: repeat(2, 1em) 1fr repeat(2, 1em);
    grid-template-rows: 1fr min-content;
    width: 100%;
    flex-grow: 1;
    max-width: var(--content-max-width);
    padding: var(--container-padding);
}
div.image-slider{
    max-height: 500px;
}

div.image-slider div.viewport, div.image-slider div.viewport div.collection{
    height: 100%;
    min-height: 0;
    max-height: 100%;
}
div.slider > button, div.slider div.viewport{
    grid-row: 1 / 2;
}

div.slider button.prev{
    grid-column: 1 / span 2;
}
div.slider div.viewport{
    grid-column: 2 / span 3;
    cursor: grab;
}
div.slider button.next{
    grid-column: 4 / -1;
}

div.slider button{
    background-color: var(--accent);
    aspect-ratio: 1/1;
    padding: 0;
    border: none;
    border-radius: 50%;
    width: min-content;
    height: min-content;
    position: relative;
    justify-self: center;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    transition: 200ms;
}

div.slider button:hover{
    background-color: var(--highlight);
}

div.slider button:hover svg{
    fill: var(--text-light-background);
}

div.slider button svg{
    min-width: 10px;
    width: 4vw;
    max-width: 30px;
    padding: 10%;
    fill: var(--text-dark-background);
}

div.slider div.viewport{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    width: 100%;
    height: 100%;
    position: relative;
    overflow-x: clip;
}
div.slider[data-component="image-slider"] div.viewport div.collection{
    height: 100%;
}
div.slider div.viewport div.collection{
    --v: 1;
    /* position: absolute; */
    --slider-gap: calc(var(--gap));
    gap: var(--slider-gap);
    display: flex;

    --gap-width: calc(var(--slider-gap) * (var(--n) - var(--v)) / var(--v));

    width: calc((var(--n)) * (100% / var(--v)) + var(--gap-width));

    --xn: calc((100%  + var(--slider-gap)) / var(--v));

    --left: calc(-1 * var(--xn) * var(--i) + var(--dx));
    /* left: var(--left, 0); */
    --xn: calc(100% / var(--n) + var(--slider-gap) / var(--n));
    /* calc(100% / ${this.#n} + var(--slider-gap) / ${this.#n}) */
    --x: calc(-1 * var(--xn) * var(--i) + var(--dx));
    transform: translateX(var(--x));
    /* transition: left 200ms; */
    transition: transform 200ms;
}
div.slider[data-component="testimonials-slider"] div.viewport div.collection{
    --v: 3;
}
div.slider :is(.slider-content-item, .slider-image-item) [contenteditable]{
    min-height: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    max-height: 100%;
}

@media only screen and (max-width: 1024px) {
    div.slider[data-component="testimonials-slider"] div.viewport div.collection{
        --v: 2;
    }
}

@media only screen and (max-width: 600px) {
    div.slider[data-component="testimonials-slider"] div.viewport div.collection{
        --v: 1;
    }
}

div.slider div.viewport div.collection.dragging{
    transition: none;
    cursor: grabbing;
}

div.slider div.viewport div.collection.clamp{
    /* --gapOffset: calc(var(--slider-gap) / var(--v) * (var(--n) - var(--v)));
    --max:  calc(-100% / var(--v) * (var(--n) - var(--v)) - var(--gapOffset));
    left:  calc(max(var(--max), min(0px, var(--left)))); */
    --overflow: calc(var(--n) - var(--v));
    --max: calc(-1 * var(--xn) * var(--overflow));
    transform: translateX(calc(max(var(--max), min(0px, var(--x)))));
}
div.slider:is([data-component="team-slider"]) div.viewport div.collection div.item img{
    width: 50%;
    align-self: center;
    border-radius: 10em;
    position: static;
    translate: unset;
    grid-column: 1;
    height: 8em;
}
div.slider:is([data-component="team-slider"]) div.viewport div.collection div.item .cms-tool.image{
    justify-items: center;
}
div.slider:is([data-component="team-slider"]) div.viewport div.collection div.item .cms-tool.image [data-tool="images"].images-tool{
    translate: 0 -100%;
}
div.slider div.viewport div.collection div.item{
    width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
}
div.slider div.viewport div.collection div.item:not(:has(> .slider-factory)){
    display: flex;
    flex-direction: column;
}

div.slider div.viewport div.collection div.item img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    /* menno edit: webkit toegevoegd voor safari bruikbaarheid */
    -webkit-user-select: none;
    user-select: none;
}
div.slider div.viewport div.collection div.item img[src="images/IMG-20241209-WA0002.webp"]{
    object-position: 0 15%;
}
div.slider div.viewport div.collection div.item img[src="images/teachers.webp"]{
    object-position: 0 32%;
}
div.slider div.viewport div.collection div.item img[src="images/Afbeelding van WhatsApp op 2025-03-18 om 16.19.18_95d5b8d4.webp"]{
    object-position: center 15%;
}

div.slider[data-component]{
    padding: 0;
    gap: 0;
}