.imageWrapper {
  width: 100%;
  height: auto;
  padding: 4px;
  .mainImageBox {
    position: relative;
    .arrow {
      position: absolute;
      border-radius: 4px;
      top: 50%;
      transform: translateY(-50%);
      width: 40px;
      height: 40px;
      background-color: #0000002e;
      padding: 10px;
      &.left {
        left: 16px;
      }
      &.right {
        right: 16px;
      }
      &.disable {
        filter: opacity(0.3);
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
    .mainImage {
      width: 100%;
      height: auto;
      object-fit: cover;
    }
  }
  .sliderWrapper {
    width: 100%;
    overflow: scroll;
    display: flex;
    gap: 8px;
    margin-top: 16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
    .sliderImage {
      width: 100px;
      height: 100px;
      object-fit: cover;
    }
  }
  @media screen and (min-width: 768px) {
    height: 400px;
  }
  @media screen and (min-width: 991px) {
    height: 600px;
  }
  @media screen and (min-width: 1440px) {
    height: 690px;
  }
}
