body{
  margin: 0;
  padding: 0;
  background-color: #8cb2d8;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: column;
}
.wrap{
  padding-top: 30px;
  width: 100%;

}
.dragable-wrap{
  display: flex;
  align-items: center;
  background-color: #fff;
  position: relative;
}
.dragable-wrap .icon{
  width: 40px;
  height: 40px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f4f4;
  position: absolute;
  cursor: pointer;
}
.dragable-wrap .icon-left{
  left: -15px;
}
.dragable-wrap .icon-right{
  right: -15px;
}
.tabs-listed{
  display: flex;
  list-style: none;
  align-items: center;
  margin: 0;
  padding: 0;
  margin: 0 auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  max-width: 1000px;
}
/* .tabs-listed .tab-item{
  width: calc(100% / 4);
} */
.tab-item img{
  height: 250px;
  object-fit: cover;
  /* width: calc(100% / 3); */
}
.tabs-listed .tab-item{
  white-space: nowrap;
}
.tabs-listed.dragging{
  scroll-behavior: smooth;
}
.tabs-listed.dragging .tab-item{
  user-select: none;
}
span.icon-right {
  margin-left: auto;
}