* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: #fff;
}

.carousel {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.slides {
  display: flex;
  width: 300%;
  height: 100%;
  transition: transform 600ms ease;
}

.slides img {
  width: 100vw;
  height: 100vh;
  flex: 0 0 100vw;
  object-fit: contain;
  background: #fff;
}

.dots {
  position: fixed;
  left: 50%;
  bottom: 18px;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.22);
}

.dot.is-active {
  background: #20e22f;
}