section.image-slider {
  --navigation-buttin-size: 45px;
  --navigation-buttin-offset: var(--navigation-buttin-size) * 0.55;
  --figcaption-font-size: 1.4rem;
  --figcaption-margin-block: 1rem;
  overflow: hidden;
}
@media (min-width: 768px) {
  section.image-slider {
    --navigation-buttin-size: clamp(45px, 31.667px + 1.7361vw, 65px);
    --figcaption-font-size: clamp(1.4rem, 1.2667rem + 0.1736vw, 1.6rem);
    --figcaption-margin-block: clamp(1rem, 0.0000rem + 1.3021vw, 2.5rem);
  }
}
section.image-slider .container {
  position: relative;
  max-width: var(--container-max-pixel-width);
  padding-inline: calc(var(--navigation-buttin-offset));
  box-sizing: unset;
}
section.image-slider .swiper-container {
  position: relative;
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
}
section.image-slider .swiper {
  overflow: unset;
  height: 0;
  padding-bottom: 66%;
}
@media (min-width: 768px) {
  section.image-slider .swiper {
    padding-bottom: var(--image-slider-height);
  }
}
section.image-slider .swiper .swiper-wrapper {
  position: absolute;
  inset: 0;
}
section.image-slider .swiper figure {
  margin: 0;
  height: unset;
  transition: opacity 0.5s ease;
}
@media (min-width: 1024px) {
  section.image-slider .swiper figure:where(:not(.swiper-slide-active)) {
    opacity: 0;
  }
}
section.image-slider .swiper figure img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
section.image-slider .swiper figure figcaption {
  font-size: var(--figcaption-font-size);
  font-weight: 300;
  margin-block-start: var(--figcaption-margin-block);
}
section.image-slider .navigation {
  position: absolute;
  top: calc(50% - var(--navigation-buttin-size) * 0.5);
  width: var(--navigation-buttin-size);
  height: var(--navigation-buttin-size);
  cursor: pointer;
  background: var(--wp--preset--color--purple);
  color: var(--wp--preset--color--white);
  border-radius: 50%;
  z-index: 1;
  transition: opacity 0.3s ease;
}
section.image-slider .navigation.swiper-button-disabled {
  opacity: 0.3;
}
section.image-slider .navigation.prev {
  left: 0;
  transform: rotate(180deg);
}
section.image-slider .navigation.next {
  right: 0;
}
section.image-slider .navigation svg {
  margin: 30%;
}
section.image-slider div.swiper-pagination-bullets {
  margin-top: calc(var(--swiper-pagination-margin) + var(--figcaption-margin-block));
}