.roomInfoBlock {
  position: relative;
  max-height: 70vh;
  width: 100%;
  height: 66vw;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
}

.roomNamePositioner {
  position: absolute;
  left: 50%;
  top: 5vw;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 5vw;
}

.roomInfoPositioner {
  position: absolute;
  left: 50%;
  bottom: 2vw;
  color: white;
  font-size: 2vw;
  transform: translate(-50%, -50%);
  text-align: center;
}

.imgSlide {
  display: none;
  height: 100%;
}

.imgSlide.active {
  display: block;
}

.carouselImg {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
  border-radius: 5px;
  overflow: hidden;
  background-color: lightgrey;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 0;
  width: auto;
  padding: 0 15%;
  color: white;
  font-weight: bold;
  font-size: 18px;
  user-select: none;
  height: 100%;
  background-position: 20% center;
  background-repeat: no-repeat;
  background-size: 15%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23.929' height='95.721' viewBox='0 0 23.929 95.721'%3E%3Cg id='Group_2' data-name='Group 2' transform='translate(1.974 1.974)' opacity='0.7'%3E%3Cline id='Line_1' data-name='Line 1' x1='19.981' y2='45.886' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='3'/%3E%3Cline id='Line_2' data-name='Line 2' x1='19.981' y1='45.886' transform='translate(0 45.886)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.next {
  right: 0;
  background-position: 80%, center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23.929' height='95.721' viewBox='0 0 23.929 95.721'%3E%3Cg id='Group_1' data-name='Group 1' transform='translate(-1857.526 -79.526)' opacity='0.7'%3E%3Cline id='Line_1' data-name='Line 1' x2='19.981' y2='45.886' transform='translate(1859.5 81.5)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='3'/%3E%3Cline id='Line_2' data-name='Line 2' y1='45.886' x2='19.981' transform='translate(1859.5 127.386)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.prev:hover,
.next:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  top: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.imgDotContainer {
  text-align: center;
  position: absolute;
  bottom: 0.5vh;
  width: 100%;
}

.imgDot {
  cursor: pointer;
  height: 1vw;
  width: 1vw;
  margin: 0 0.5vw;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  display: inline-block;
}

.active,
.dot:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 768px) {
  .imgDot {
    min-height: 10px;
    min-width: 10px;
    margin: 0 4px;
  }

  .roomInfoPositioner {
    font-size: 14px;
  }

  .roomNamePositioner {
    font-size: 6vw;
  }

  .roomInfoBlock {
    height: 60vw;
  }
}