/* Logo carousel — auto-width slides, gallery-style overlay nav. */

.logo-carousel {
  --logo-carousel-gap: 60px;
  --logo-carousel-image-max-inline: 200px;
  --logo-carousel-image-max-block: 75px;
  --logo-carousel-scene-max: 1400px;
  --logo-carousel-scene-padding: 3rem;
  position: relative;
  overflow: visible;
}

.logo-carousel-scene {
  max-inline-size: var(--logo-carousel-scene-max);
  margin-inline: auto;
  padding-inline: var(--logo-carousel-scene-padding);
}

.logo-carousel-swiper {
  overflow: hidden;
  inline-size: 100%;
}

.logo-carousel .swiper-slide.logo-carousel-slide {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: max-content;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.logo-carousel-image,
.logo-carousel img {
  display: block;
  max-inline-size: var(--logo-carousel-image-max-inline);
  max-block-size: var(--logo-carousel-image-max-block);
  inline-size: auto;
  block-size: auto;
  width: auto;
  height: auto;
  margin: 0 !important;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  object-fit: contain;
  object-position: center;
}

.logo-carousel button.logo-carousel-nav {
  position: absolute;
  inset-block-start: 50%;
  z-index: 5;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  padding: 0.75rem;
  border: 0;
  border-radius: 50% !important;
  cursor: pointer;
  pointer-events: auto;
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.span_12.light .logo-carousel button.logo-carousel-nav {
  background: var(--color-on-primary);
  color: var(--color-primary);
}

.logo-carousel button.logo-carousel-prev {
  inset-inline-start: 0;
  transform: translate(-50%, -50%);
}

.logo-carousel button.logo-carousel-next {
  inset-inline-end: 0;
  transform: translate(50%, -50%);
}

.logo-carousel button.logo-carousel-nav:focus-visible {
  outline: 0.125rem solid currentColor;
  outline-offset: 0.125rem;
}

.logo-carousel-arrow {
  display: block;
  inline-size: 1rem;
  block-size: 1rem;
  background-color: currentColor;
  mask: var(--logo-carousel-arrow) center / contain no-repeat;
  -webkit-mask: var(--logo-carousel-arrow) center / contain no-repeat;
}

.logo-carousel-arrow-prev {
  transform: rotate(-90deg);
}

.logo-carousel-arrow-next {
  transform: rotate(90deg);
}