(~'div@{sliderid}') {
  margin: @margin;


  .n2-ss-slider-1 {
    display: grid;
    position: relative;
  }

  .n2-ss-slider-2 {
    display: grid;
    place-items: center;
    position: relative;

    overflow: hidden;
    border: @border solid @borderrgba;
    border-radius: @borderRadius;

    background-repeat: repeat;
    background-position: 50% 50%;
    background-size: @backgroundSize;
    background-attachment: @backgroundAttachment;
    background-color: @backgroundrgba;
    z-index: 1;
  }

  .n2-ss-slider-3 {
    box-sizing: border-box;
    display: grid;
    grid-template-areas: 'full';
    place-items: center;

    position: relative;
    overflow: hidden;
    z-index: 20;
    width: 100%;

    > * {
      grid-area: full;
    }
  }

  .n2-ss-slider-pane {
    display: grid;
    grid-template-areas: 'slide';

    justify-self: stretch;
    margin: 0 var(--self-side-margin);

    position: relative;
    transform-style: preserve-3d;
    overflow: hidden;

    opacity: 0.001;

    > * {
      grid-area: slide;
    }
  }

  .n2-ss-slider-pane--ready {
    animation-name: carousel-multi-fade-in;
    animation-duration: 1s;
    opacity: 1;
  }

  .n2-ss-slide {
    z-index: 1;
    position: relative;
    width: var(--slide-width);
    max-width: @slideouterwidth;
    display: block;

    border-radius: @slideBorderRadius;
    background-clip: padding-box;

    background-color: @slideBackgroundrgba;

    border: @slideborderwidth solid @slidebordercolor;
    box-sizing: border-box;

    --a: calc(var(--slide-group-index) * var(--slide-width));
    --b: calc(var(--slide-group-index) * 2);
    --c: calc(var(--b) + 1);
    --d: calc(var(--c) * var(--slide-margin-side));
    --e: calc(var(--a) + var(--d));
    --f: calc(var(--slide-transform-offset, 0) * 1px);
    transform: translateX(calc(var(--e) - var(--f)));

    html[dir="rtl"] & {
      transform: translateX(calc(-1 * var(--e) - var(--f)));
    }
  }

  .n2-ss-slider-pane .n2-ss-preserve-size {
    width: 100%;
    max-width: @slideouterwidth;
  }

  .n2-ss-layers-container {
    position: relative;
  }

  .ssPerspective() when (@hasPerspective = 1) {
    .n2-ss-slide {
      perspective: @perspective;
    }
  }
  .ssPerspective();

  .n2-ss-slide-active {
    z-index: 3;
  }

  .n2-ss-layer {
    -webkit-backface-visibility: hidden;
  }

}


@keyframes carousel-multi-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
