/* Root-007 - root-slider */
    



/* Root-007*/

    .breakdance .root-007 {
        padding-block-end: 100px;
    }

    @media (min-width: 1024px) {
    .breakdance .root-007 {
            padding-block-end: 128px;
        }
    }

    .root-007 ul {
    list-style: none;
    }

    .root-007 button {
        cursor: pointer;
        border: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        padding: 0;
        margin: 0;
        background-color: unset;
    }

    .root-007 button {
        -webkit-tap-highlight-color: transparent;
    }

    .root-007 aside, .root-007 nav {
        display: block;
    }

     .root-slider {
    --dynamic-number-of-slides: 1;
    --dynamic-active-slide-index: 0;
    --config-slide-grid-size: 4;
    --config-next-slide-column-offset: 3;
    --config-next-slide-row-offset: 2;
    --config-slide-gap: 28px;
    --config-slide-size: min(calc(100vw - 80px), calc(var(--config-canvas-height) - 20vh));
    --config-canvas-height: 90svh;
    --helper-slide-gap-overall-width: calc(var(--config-slide-gap) * (var(--config-slide-grid-size) - 1));
    --helper-non-active-space-width: calc((100vw - var(--config-slide-size)) / 2);
    --helper-non-active-space-height: calc((var(--config-canvas-height) - var(--config-slide-size)) / 2);
    width: 100%;
    height: var(--config-canvas-height);
    position: relative;
}


@media (min-width: 1024px) {
 .root-slider {
        --config-slide-size: max(30vw, calc(var(--config-canvas-height) - 30vh));
        --config-slide-gap: 48px;
        --config-next-slide-column-offset: 4;
        --config-next-slide-row-offset: 2;
        --config-canvas-height: 100vh;
  }
}

/* ----------------------------- */
/* Gradient overlay ::before     */
/* ----------------------------- */
.breakdance .root-slider::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: var(--helper-non-active-space-width);
  height: 100%;
  display: inline-block;
  pointer-events: none;
  background: linear-gradient(
    to right,
    #000,
    #0003 40%,
    transparent
  );
}

/* tweak the gradient on desktop */
@media (min-width: 1024px) {
 .breakdance .root-slider::before {
    background: linear-gradient(
      to right,
      #000,
      #000 20%,
      rgba(0,0,0,0.3) 80%,
      transparent
    );
  }
}

._canvasGrid a {

        color: inherit;
    text-decoration: none;
}

.breakdance ._canvasGrid .bde.container-link {
    display: inline-grid;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
}


.md-slider-container {
  display: grid;
}

.breakdance .canvasWrapper {
  display: block;
  grid-column: 1 / 1;
    grid-row: 1 / 1;
    width: 100%;
    height: var(--config-canvas-height);
}

.breakdance ._canvasVisibleWrapper {
    overflow: hidden;
}

.breakdance ._canvasOrchestratorWrapper {
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    overflow-y: hidden;
    overflow-x: scroll;
    z-index: 10;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.breakdance ._canvasGrid {
    list-style: none;
    display: inline-grid;
    grid-template-columns: repeat(calc(var(--dynamic-number-of-slides) * var(--config-slide-grid-size) - (var(--dynamic-number-of-slides) - 1) * -1 * (var(--config-next-slide-column-offset) - var(--config-slide-grid-size))), calc((var(--config-slide-size) - var(--helper-slide-gap-overall-width)) / var(--config-slide-grid-size)));
grid-template-rows: repeat(calc(var(--dynamic-number-of-slides) * var(--config-slide-grid-size) - (var(--dynamic-number-of-slides) - 1) * -1 * (var(--config-next-slide-row-offset) - var(--config-slide-grid-size))), calc((var(--config-slide-size) - var(--helper-slide-gap-overall-width)) / var(--config-slide-grid-size)));
    gap: var(--config-slide-gap);
    padding: var(--helper-non-active-space-height) var(--helper-non-active-space-width);
}



.breakdance .slide-positioner {
 
    --dynamic-slide-index: 0;
    grid-row: calc(var(--dynamic-slide-index) * var(--config-next-slide-row-offset) + 1) / span var(--config-slide-grid-size);
    grid-column: calc(var(--dynamic-slide-index) * var(--config-next-slide-column-offset) + 1) / span var(--config-slide-grid-size);
}


.breakdance .visible-slide {
--dynamic-slide-index: 0;
--dynamic-color: $color-gray;
  z-index: calc(var(--dynamic-number-of-slides) - var(--dynamic-slide-index));

}

.breakdance ._canvasGrid .orchestrator-slide-x {
scroll-snap-align: center;
}

.breakdance ._canvasGrid .orchestrator-slide-x:not(.orchestrator-slide-active) {
    pointer-events: none;
}



.breakdance .showcase-slide-inner {
  position: relative;
}
.breakdance .visible-slide .showcase-inner-border {
    position: absolute;
    height: 100%;
    width: 4px;
    right: -4px;
    top: 0;
    transform: rotateY(90deg);
    transform-origin: left;
    background: var(--dynamic-color);
}


.breakdance .visible-slide .showcase-inner-drop-shadow {
    scale: 1.2;
    background: #0009;
    filter: blur(12px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}


.breakdance .visible-slide .showcase-inner-inset-shadow {
    --target-corner: 75% 75%;
    --target-vertical-side: top;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(farthest-corner at var(--target-corner), rgb(0, 0, 0) 0%, rgba(0, 0, 0, .8) 10%, rgba(0, 0, 0, .2) 100%), linear-gradient(to var(--target-vertical-side), rgb(0, 0, 0) 0%, rgb(0, 0, 0) 30%, rgba(0, 0, 0, .5) 60%, rgba(0, 0, 0, 0) 80%);
    background-repeat: no-repeat;
    z-index: 10;
  transition: opacity .6s;
}


.breakdance .indicator-slider {
    position: absolute;
    overflow: hidden;
    bottom: calc((var(--config-canvas-height) - var(--config-slide-size)) / 4);
    left: 50%;
    transform: translate(-50%);
    z-index: 10;
    width: calc(100vw - 32px);
}

@media (min-width: 1024px) {
    .breakdance .indicator-slider {
        width: var(--config-slide-size);
        bottom: calc((var(--config-canvas-height) - var(--config-slide-size)) / 4);
    }
}


 .breakdance .indicator-root {
    width: 100%;
    height: 32px;
    position: relative;
    touch-action: pan-x;

}

.breakdance .indicator-root:before {
    content: "";
    position: absolute;
    background: #ffffff4d;
    top: 50%;
    transform: translateY(-50%);
    height: 1px;
    left: 0;
    width: 100%;
}


.breakdance .thumb-indicator {
    position: absolute;
    height: 8px;
    top: calc(50% - 4px);
    left: 0;
    width: calc(100% / var(--ci-dynamic-number-of-slides));
    background: #fff;
    transform-origin: center;
    border-radius: 24px;
  touch-action: none;
  will-change: transform;
  transition: scale .2s ease;
}