.tiny-carousel {
  position: relative;
  overflow: hidden;
  .carousel-panels {
    height: 100%;
    .carousel-panel {
      display: none;
      position: absolute;
      width: 100%;
      height: 100%;
      // transition-property: transform;
      &.active, &.next, &.prev { 
        display: block;
      }
      &.next {
        transform: translateX(100%);
      }
      &.prev {
        transform: translateX(-100%);
      }
      &:nth-child(even) {
        background-color: #ddd;
      }
      &:nth-child(odd) {
        background-color: #ccc;
      }
    }
    &.left {
      transform: translateX(-100%);
      transition: all .4s;
    }
    &.right {
      transform: translateX(100%);
      transition: all .4s;
    }
  }
  .carousel-arrows {
    .carousel-arrow {
      position: absolute;
      top: 50%;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border: none;
      border-radius: 50%;
      background: rgba(31,45,61,.11);
      opacity: 0;
      transition: all 0.3s;
      outline: none;
      cursor: pointer;
      &::before {
        content: "";
        display: block;
        width: 6px;
        height: 6px;
        border-left: 1px solid #fff;
        border-top: 1px solid #fff;
      }
      &.arrow-prev {
        left: 10px;
        transform: translateX(-10px) translateY(-50%);
        &::before {
          transform: rotate(-45deg);
        }
      }
      &.arrow-next {
        right: 10px;
        transform: translateX(10px) translateY(-50%);
        &::before {
          transform: rotate(135deg);
        }
      }
      &:hover {
        background: rgba(31, 45, 61, .23);
      }
    }
  }
  &:hover {
    .carousel-arrows {
      .carousel-arrow {
        &.arrow-prev {
          transform: translateX(0) translateY(-50%);
          opacity: 1;
        }
        &.arrow-next {
          transform: translateX(0) translateY(-50%);
          opacity: 1;
        }
      }
    }
  }
  .carousel-dots {
    position: absolute;
    display: flex;
    z-index: 1;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    list-style: none;
    margin: 0;
    padding: 0;
    .carousel-dot {
      padding: 8px 0;
      margin: 0 4px;
      cursor: pointer;
      &::before {
        content: "";
        display: block;
        width: 30px;
        height: 2px;
        border-radius: 2px;
        background: #999;
        transition: all 0.3s;
      }
      &.active::before {
        background: #fff;
      }
    }
  }
}