.my-carousel-wrapper{
	width: 100%; 
	overflow: hidden; 
	position: relative;
}

.my-carousel-track{
	display: flex; 
	transition: transform 0.5s ease; 
	will-change: transform;
}



.my-carousel-item {
  width: 100%;
  flex: 0 0 auto; 
}

.my-carousel-nav{
	position: absolute; 
	 
	transform: translateY(-50%); 
	z-index: 10;
}

.my-prev{
	top: 50%; 
	left: 10px;
}

.my-next{
	top: 50%; 
	right: 10px;
}



/* ≥480px: 1 item per view (same as default, optional) */
@media (min-width: 480px) {
  .my-carousel-item {
    width: 100%;
  }
}

/* ≥640px: 2 items per view */
@media (min-width: 640px) {
  .my-carousel-item {
    width: calc((100% / 2) - 10px);
  }
}

/* ≥776px: 3 items per view */
@media (min-width: 776px) {
  .my-carousel-item {
    width: calc((100% / 3) - 10px);
  }
}

/* ≥992px: 4 items per view */
@media (min-width: 992px) {
  .my-carousel-item {
    width: calc((100% / 4) - 10px);
  }
}

/* ≥1200px: 5 items per view */
@media (min-width: 1200px) {
  .my-carousel-item {
    width: calc((100% / 5) - 10px);
  }
}

/* ≥1400px: 6 items per view */
@media (min-width: 1400px) {
  .my-carousel-item {
    width: calc((100% / 6) - 10px);
  }
}