@import url("../../css/_static-variables.css");

.images-component .slider-button.active,
.images-component .overlay.slider-navigation .slider-button.active {
  background-color: var(--theme-dark-green-color) !important;
}

.images-component .slider-section-desktop .image-section {
  padding: 5px 0;
  width: 100%;
  overflow-x:auto;
}

.images-component .slider-section-desktop .image-section::-webkit-scrollbar {
  display: none;
}

.images-component .gallery-focus {
  position: relative;
}

.images-component .gallery-focus .icon-wrapper {
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.images-component .gallery-focus:hover .icon-wrapper {
  opacity: 1;
}

@media screen and (max-width: 1366px) {
  .images-component .gallery-focus .icon-wrapper.touch-device {
    opacity: 1;
  }
}

.images-component .arrow-left,
.images-component .arrow-right {
  z-index: 1;
  display: block;
}

.images-component .slider-section-desktop .image-section .swiper-slide {
  width: auto !important;
}

.images-component .gallery-focus .swiper-wrapper{
  height: auto;
}

.gallery.highlight .overlay .caption {
    color: var(--grey-600);
}

@media (max-width: 992px) {
  .images-component .overlay .image-wrapper {
    max-width: 100% !important;
  }
}