.bannerslider-wrapper {
   position: relative;
   width: 100%;
   overflow: hidden;
}

.bannerslider-track {
   position: relative;
   width: 100%;
}

.bannerslider-slide {
   display: none;
   width: 100%;
}

.bannerslider-slide.active {
   display: block;
   animation: bannerslider-fade 0.5s ease;
}

.bannerslider-slide a,
.bannerslider-slide picture,
.bannerslider-slide img {
   display: block;
   width: 100%;
   height: auto;
   object-fit: none;
}

@keyframes bannerslider-fade {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

.bannerslider-arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background: rgba(255, 255, 255, 0.7);
   border: none;
   width: 40px;
   height: 40px;
   line-height: 40px;
   border-radius: 50%;
   cursor: pointer;
   font-size: 16px;
   z-index: 5;
}

.bannerslider-arrow:hover {
   background: rgba(255, 255, 255, 0.95);
}

.bannerslider-prev {
   left: 15px;
}

.bannerslider-next {
   right: 15px;
}

.bannerslider-dots {
   position: absolute;
   bottom: 15px;
   left: 0;
   right: 0;
   display: flex;
   justify-content: center;
   gap: 8px;
   z-index: 5;
}

.bannerslider-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.6);
   border: 1px solid rgba(0, 0, 0, 0.2);
   padding: 0;
   cursor: pointer;
}

.bannerslider-dot.active {
   background: #fff;
   border-color: #333;
}

@media (max-width: 767px) {

   .bannerslider-slide a,
   .bannerslider-slide picture,
   .bannerslider-slide img {
      object-fit: contain;
   }

   .bannerslider-arrow {
      width: 32px;
      height: 32px;
      line-height: 32px;
      font-size: 13px;
   }
}