.product-miniature {
  .thumbnails-rollover {
    display: inline-block;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    img {
      transition: all 0.5s ease;
      opacity: 1;
      &:nth-child(2) {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
      }
    }
    &.horizontal_slide {
      img {
        transform: translateX(0);
        &:nth-child(2) {
          transform: translateX(100%);
        }
      }
    }
    &.vertical_slide {
      img {
        transform: translateY(0);
        &:nth-child(2) {
          transform: translateY(100%);
        }
      }
    }
  }
  &:hover {
    .thumbnails-rollover {
      img {
        opacity: 0;
        &:nth-child(2) {
          opacity: 1;
        }
      }
      &.horizontal_slide {
        img {
          transform: translateX(-100%);
          &:nth-child(2) {
            transform: translateX(0);
          }
        }
      }
      &.vertical_slide {
        img {
          transform: translateY(-100%);
          &:nth-child(2) {
            transform: translateY(0);
          }
        }
      }
    }
  }
  .thumbnails-carousel {
    position: relative;
    .carousel-control {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .carousel-indicators {
      white-space: nowrap;
      display: flex;
      left: 50%;
      right: auto;
      justify-content: flex-start;
      margin: 0;
      transform: translateX(-50%);
      width: auto;
      transition: bottom .3s;
      overflow: hidden;
      li {
        box-sizing: border-box;
        margin: 0 4px;
        flex: 0 0 auto;
        width: 20px;
        height: 20px;
        transition: .5s;
        text-indent: inherit;
        background-clip: inherit;
        img {
          margin: 0;
        }
      }
    }
    &.gallery {
      .carousel-indicators {
        width: calc(100% - 8px);
        li {
          border: none;
          background: none;
          height: auto;
          margin: 0;
          padding: 0 4px;
          img {
            opacity: 0.3;
            border: 3px solid white;
          }
          &.active {
            img {
              opacity: 1;
              border: 3px solid black;
            }
          }
        }
      }
    }
  }
  &:hover {
    .thumbnails-carousel {
      .carousel-indicators {
        bottom: 80px;
      }
    }
  }
}