/**
** Theme Image Slider Styles
 * This file contains the styles for the image slider component in the theme.
*/

.wp-block-uagb-container.cont-img-swiper img,
.cont-img-txt .spectra-image-gallery__media {
  max-height: 589px;
  border-radius: var(--border-radius);
}

.spectra-image-gallery__control-arrows.slick-arrow,
#slideshow .swiper-pagination .swiper-button {
  border: 2px solid var(--ast-global-color-0);
  border-radius: 100px;
  --my-size: clamp(28px, 2.28rem + 0.8vw, 48px);
  width: var(--my-size);
  height: var(--my-size);

  justify-content: center;
  display: flex;
  align-items: center;
  padding: 0 !important;
}

.spectra-image-gallery__control-arrows.slick-arrow svg {
  display: none;
}

.spectra-image-gallery__control-arrows.slick-arrow::after,
#slideshow .swiper-button::after {
  content: "";
  display: block;
  transform: translateX(2px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 45%;
  width: 25%;
  background-image: url(/wp-content/themes/astra-impuls-child/img/icon-pfeil-button-creme);
}

.spectra-image-gallery__control-arrows.slick-arrow.slick-prev::after,
#slideshow .swiper-button.swiper-button-prev::after {
  transform: rotate(180deg) translateX(2px);
}

.spectra-image-gallery__control-arrows--carousel.slick-next {
  right: var(--gap-m) !important;
}

.spectra-image-gallery__control-arrows--carousel.slick-prev {
  left: var(--gap-m) !important;
}

@media (max-width: 768px) {
  .spectra-image-gallery__control-arrows.slick-arrow {
    transform: translateY(-50%);
  }

  .spectra-image-gallery__control-arrows--carousel.slick-next {
    right: 15px !important;
  }

  .spectra-image-gallery__control-arrows--carousel.slick-prev {
    left: 15px !important;
  }
}