:root {
  --slider-height:50vh;
  --w-slider-img:64%;
  --w-slider-img-hover:68%;
  --shape-slider: var(--shape-corner-medium-default-size) ;
}

.gallery {
  display: flex;
  flex: 1;
  overflow-x: scroll;
  max-height: inherit;
  min-height: inherit;
}
.gallery:has(.slider-img) {
  border-radius: var(--shape-slider);
  gap: 8px;
}
.gallery-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 100%;
  min-height: var(--slider-height);
  max-height: var(--slider-height);
}
.gallery-wrap .button.button-size--medium {
  min-width: 40px;
}
.gallery-wrap .button.button-size--large {
  min-width: 56px;
}
.gallery-wrap .button.button-size--large svg {
  width: 56px;
  height: 56px;
}
.gallery-wrap.expanded {
  position: relative;
}
.gallery-wrap.expanded button {
  position: absolute;
}
.gallery-wrap.expanded button:last-child {
  right: 12px;
}
.gallery-wrap.expanded button:first-child {
  left: 12px;
}
.gallery .slider-img {
  flex: 1;
  min-width: var(--w-slider-img);
  max-height: inherit;
  border-radius: var(--shape-slider);
  overflow: hidden;
  cursor: pointer;
  transition: cubic-bezier(0.4, 0, 1, 1) 0.4s;
  cursor: pointer;
}
.gallery > .slider-img:hover {
  min-width: var(--w-slider-img-hover);
}
.gallery > .slider-img.img-black-and-white {
  filter: grayscale(100%);
}
.gallery > .slider-img.img-black-and-white:hover {
  filter: grayscale(0);
}
.gallery img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 480px) {
  :root {
    --w-slider-img:74%;
    --w-slider-img-hover:78%;
    --shape-slider: var(--shape-corner-large-default-size) ;
  }
}
@media screen and (min-width: 960px) {
  :root {
    --w-slider-img:38%;
    --w-slider-img-hover:42%;
  }
}
@media screen and (min-width: 1280px) {
  :root {
    --w-slider-img:28%;
    --w-slider-img-hover:32%;
  }
}

/*# sourceMappingURL=slider.css.map */