.ui-gate-layer {
  --len: 1;
  --current: 0;
  width: 100%;
  height: 100%;
  overflow: hidden !important;

  .ui-gate-slides {
    --content-width: calc(var(--len) * 100%);
    --item-width: calc(100% / var(--len));

    width: var(--content-width);
    height: 100%;
    transition: transform .3s ease;
    transform: translateX(calc(-1 * var(--current) * var(--item-width)));

    .ui-gate-content {
      width: var(--item-width);
      height: 100%;
      float: left;
      opacity: 0;
      transition: opacity .3s ease;

      &.active {
        opacity: 1;
      }
    }
  }

}