
.wrapper{
	width: 96%;
	display: flex;
	max-width: 1200px;
	position: relative;
	margin: auto;
	padding-top: 30px;
	padding-bottom: 30px;
  }

.wrapper i{
	top: 50%;
	height: 44px;
	width: 44px;
	color: #343F4F;
	cursor: pointer;
	font-size: 1.15rem;
	position: absolute;
	text-align: center;
	line-height: 44px;
	background: #eee;
	border-radius: 50%;
	transform: translateY(-50%);
	transition: transform 0.1s linear;
	z-index: 6;
  }
  .wrapper i:active{
	transform: translateY(-50%) scale(0.9);
  }
  .wrapper i:hover{
	background: #f2f2f2;
  }
  .wrapper i:first-child{
	left: -22px;
	display: none;
  }
  .wrapper i:last-child{
	right: -22px;
  }

.wrapper .carousel {
	font-size: 0px;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	scroll-behavior: smooth;
	padding-top: 10px;
	padding-bottom: 10px;
}

.wrapper .carousel img:hover {
	transform: scale(1.05);
	transition: 0.5s;
}

.wrapper .carousel a {
	border: 0px;
	text-decoration: none;
	margin-left: 15px;
}
.wrapper .carousel a:first-child {
	margin-left: 0px;
}

/*
.carousel.dragging{
	cursor: grab;
	scroll-behavior: auto;
  }
  .carousel.dragging img{
	pointer-events: none;
  }
  */

.carousel img {
	height: 180px;
	object-fit: cover;
	margin-left: 15px;
	width: calc(100% / 4);
}

.carousel img:first-child {
	margin-left: 0px;
}

@media screen and (max-width: 900px) {
	.carousel img{
	  width: calc(100% / 2);
	}
  }
  @media screen and (max-width: 400px) {
	.carousel img{
	  width: 100%;
	}
	.wrapper .carousel a {
		pointer-events: none;
	}
  }