.ribo-slider {
  display: flex;
  gap: 20px;
}

.ribo-thumbs {
  width: 80px;
}

.ribo-thumbs img {
  width: 100%;
  opacity: 0.5;
  cursor: pointer;
  transition: 0.3s;
}

.ribo-thumbs .swiper-slide {
  height: auto !important;
}

.ribo-thumbs .swiper-slide-thumb-active img {
  opacity: 1;
}

.ribo-main {
  flex: 1;
}

.ribo-image-wrapper {
  position: relative;
  width: 100%;
}

.ribo-image-wrapper img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
}

@media screen and (max-width: 1240px) {
  .ribo-slider {
      display: grid;
  }
  .ribo-thumbs {
      width: 100%;
      order: 2;
  }
  .ribo-main {
      width: 100%;
      order: 1;
  }
  .ribo-thumbs .swiper-slide {
      width: 20%;
  }
  .ribo-thumbs.swiper-vertical>.swiper-wrapper {
      flex-direction: row;
      gap: 10px;
  }
}


/* MOBILE */
@media(max-width:768px){
  .ribo-slider {
    flex-direction: column;
  }
}