*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.left-container {
  background-color: aqua;
  text-align: center;
}

.left-container h1 {
  color: dodgerblue;
  text-align: center;
}

.right-container {
  background-color: aqua;
}

.right-container h1 {
  color: dodgerblue;
  text-align: center;
}

.slideshow-wrapper {
  display: flex;
  height: auto;
}

.slides {
  flex: 5;
  width: 100%;
  height: 50rem;

  transition: opacity 1s;
  /* background-color: black; */
}

.slides img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}

.control {
  flex: 1;
}
.arrows-visibility {
  opacity: 1;
}

.left-arrow {
  background-color: chocolate;
}

.right-arrow {
  background-color: rgb(0, 255, 30);
}