.slider {
  position: relative;
}

.slider-container {
  position: relative;
  overflow: hidden;
}

.slider-arrow, .splide__arrow {
  overflow: visible;
  color: inherit;
  white-space: nowrap;
  -webkit-appearance: none;
  display: inline-flex;
  box-sizing: border-box;
  text-decoration: none;
  border: var(--control-border-width) solid transparent;
  border-radius: var(--control-border-radius);
  width: var(--btn-arrow-size);
  height: var(--btn-arrow-size);
  align-items: center;
  justify-content: center;
  background: var(--muted);
  color: var(--base-color);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
.slider-arrow:hover, .splide__arrow:hover {
  background: var(--grey300);
  cursor: pointer;
}
.slider-arrow:disabled, .splide__arrow:disabled {
  display: none;
}

.splide__arrow--prev svg {
  transform: rotate(180deg);
}

.slider-arrow__prev, .splide__arrow--prev {
  left: 0;
}

.slider-arrow__next, .splide__arrow--next {
  right: 0;
}

.splide--ttb .splide__arrow--prev {
  top: 0;
  transform: translateX(-50%);
  left: 50%;
}
.splide--ttb .splide__arrow--prev svg {
  transform: rotate(-90deg);
}
.splide--ttb .splide__arrow--next {
  bottom: 0;
  transform: translateX(-50%);
  left: 50%;
  top: auto;
}
.splide--ttb .splide__arrow--next svg {
  transform: rotate(90deg);
}

.slider-arrow--secondary {
  background-color: var(--secondary);
  border-color: var(--secondary);
  color: var(--secondary-inverse);
}
.slider-arrow--secondary:hover {
  background-color: var(--primary-light);
  border-color: var(--primary-light);
  color: var(--primary-inverse);
}

.slide {
  position: relative;
}
.slide-overlay {
  color: #fff;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: var(--gap-lg) var(--gap-xl);
  background-color: var(--bg-overlay);
}

.slider-gallery .splide__slide {
  width: 185px;
}

.slider-gallery .slider-arrow {
  top: 60px;
}

.slider-gallery .slider-arrow__prev {
  left: calc(-1 * var(--btn-arrow-size) / 2);
  transform: none;
}

.slider-gallery .slider-arrow__next {
  right: calc(-1 * var(--btn-arrow-size) / 2);
  transform: none;
}

.slide-caption {
  padding-top: var(--gap-xs);
  font-size: var(--fs-small);
}

.slider-px-sm {
  padding: 0 var(--gap-sm);
}

.slider-px-lg {
  padding: 0 var(--gap-lg);
}

.splide__arrow.slider-arrow__gap-right {
  right: var(--btn-arrow-size);
}

.splide__arrow.slider-arrow__gap-left {
  left: var(--btn-arrow-size);
}

.slider-arrow__hf-right {
  right: calc(-1 * var(--btn-arrow-size) / 2);
}

.slider-arrow__hf-left {
  left: calc(-1 * var(--btn-arrow-size) / 2);
}

@media (min-width: 1280px) {
  .slider-px-4xl {
    padding: 0 106px;
  }
}
.splide__pagination__page {
  width: 22px;
  height: 22px;
  background: var(--muted);
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.splide__pagination__page.is-active {
  background: var(--secondary);
}

.slideshow-block {
  display: flex;
  gap: var(--gap);
}
@media (max-width: 1279px) {
  .slideshow-block {
    flex-wrap: wrap;
  }
  .slideshow-block > * {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (max-width: 759px) {
  .slideshow-block .slide-overlay {
    position: relative;
    left: -12.5%;
    width: 100vw;
    margin-top: var(--gap);
    box-sizing: border-box;
    opacity: 0;
  }
  .slideshow-block .slide-overlay::before {
    content: "";
    width: 16px;
    height: 16px;
    display: block;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--bg-overlay);
    box-sizing: border-box;
    position: absolute;
    top: -16px;
    margin-left: 30px;
  }
  .slideshow-block .is-active > .slide-overlay {
    opacity: 1;
  }
}
@media (max-width: 559px) {
  .slideshow-block {
    margin: 0 calc(-1 * var(--gap-sm));
  }
  .slideshow-block .splide__arrow--prev, .slideshow-block .splide__arrow--next {
    top: 90px;
  }
}

.slideshow-col {
  flex-grow: 1;
  max-width: calc(100% - 273px - var(--gap));
}
.slideshow-col .splide__arrow--prev {
  left: var(--gap);
}
.slideshow-col .splide__arrow--next {
  right: var(--gap);
}
@media (max-width: 1279px) {
  .slideshow-col {
    max-width: 100%;
  }
}

.slideshow-nav {
  flex: 0 0 273px;
  width: 273px;
}
@media (max-width: 1279px) {
  .slideshow-nav {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (max-width: 559px) {
  .slideshow-nav {
    display: none;
  }
}
.slideshow-nav.splide--ttb .splide__arrow--prev, .slideshow-nav.splide--ttb .splide__arrow--next {
  width: 100%;
  transform: none;
  left: 0;
  background: var(--bg-overlay);
  color: #fff;
}
.slideshow-nav.splide--ttb .splide__arrow svg {
  width: 15px;
  height: 15px;
}