.carousel-container {
      position: relative;
    }

.slider {
  overflow: hidden;
}

.slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slide {
  min-width: 100%;
  margin: 0;
  padding: 0;
}

.dots-container {
      position: absolute;
      top: 50%;
      right: 50px;
      transform: translateY(-50%);
    }

    .dot {
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #bbb;
      margin: 0 5px;
      cursor: pointer;
    }

    .dot.active {
      background-color: #717171;
    }

.slide img {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

/* Media Query for Mobile */
@media (max-width: 767px) {
  .dots-container {
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	flex-direction: row; /* revert to horizontal layout on larger screens */
  }
  .dot {
	  width: 10px;
	  height: 10px;
	}
}