.sliderContainer {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.swiper {
  width: 100%;
  height: 100%;
}

.image {
  object-fit: cover;
  width: auto;
  height: 100%;
  /* width: auto !important;
  height: 100% !important;
  position: relative !important; */
}

.favoriteButton {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 10 !important;
  background-color: rgba(255, 255, 255, 0.9) !important;
  color: #666 !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.favoriteButton:hover {
  background-color: rgba(255, 255, 255, 1) !important;
  transform: scale(1.1) !important;
}

.favoriteButton.favorited {
  color: #ff4757 !important;
}

.navButtonLeft {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  background-color: rgba(255, 255, 255, 0.9) !important;
  color: #333 !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  opacity: 0 !important;
}

.navButtonRight {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  background-color: rgba(255, 255, 255, 0.9) !important;
  color: #333 !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  opacity: 0 !important;
}

.sliderContainer:hover .navButtonLeft,
.sliderContainer:hover .navButtonRight {
  opacity: 1 !important;
}

.navButtonLeft:hover,
.navButtonRight:hover {
  background-color: rgba(255, 255, 255, 1) !important;
  transform: translateY(-50%) scale(1.1) !important;
}