/* Overall carousel dimensions */

#carousel,
.carousel-image {
  width: 400px;
  height: 400px;
}

/* Carousel frame setup */

#carousel {
  position: relative;
  /* Part 3.2: Hide stuff that overflows the box */
  overflow: hidden;
}

/* Images */

#carousel-image-row {
  /* Part 1.2: Make images appear in a row */
  display: flex;
  flex-direction: row;
  /* Part 1.3: What kind of positioning? */
  position: absolute;
  left: 0px;
  /* Part 3.1: Add transition */
  transition: 0.5s left;
}

.carousel-image img {
  height: 100%;
  width: auto;
}

/* Controls */

.hidden {
  visibility: hidden;
}

/* Part 4: optional button styling */

#carousel-controls {
  /* vertically center */				
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  /* spacing between the two buttons */
  width: 100%;
  display: flex;
  justify-content: space-between;
  
  /* appear in front of images */
  z-index: 1;
}

#button-next,
#button-previous {
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
}