/* General */

.section-carousel {
  position: relative;
  padding-block: var(--spacing-xl);
}

.slide-media {
  /* opacity: 0.25; */
  /* transition: opacity 0.5s ease; */
}

.swiper-slide-active.slide-media {
  /* opacity: 1; */
}

/* Media */

.carousel-media::part(wrapper) {
  align-items: center;
  transition-timing-function: ease-in-out;
}

.slide-media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.slide-media figcaption {
  padding-block: var(--spacing-s);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.swiper-slide-active figcaption {
  opacity: 1;
}

.button-carousel {
  display: none;

  position: absolute;
  z-index: 4;
  top: 50%;
  /* color: black; */
  /* background-color: white; */
  padding: var(--spacing-s);
  border-radius: var(--rounded-s);
  /* box-shadow: var(--shadow-s); */
  transition: opacity 0.5s ease, transform 0.2s ease, box-shadow 0.4s ease;

  /* New styles */
  color: white;

  svg {
    width: 1em;
  }
}
.button-carousel:hover {
  transform: translateY(-2px);
  /* box-shadow: var(--shadow-s); */
}
.button-carousel:active {
  transform: scale(0.95);
  /* box-shadow: none; */
}
.button-carousel[disabled] {
  opacity: 0;
  transform: translateY(8px) scale(0.9);
}
.button-next {
  right: auto;
  right: 5%;
}
.button-prev {
  right: auto;
  left: 5%;
}

@media (min-width: 600px) {
  .button-carousel {
    display: block;
  }

  .button-next {
    right: 10%;
  }
  .button-prev {
    left: 10%;
  }
}

.carousel-pagination {
  padding: var(--spacing-m);
  display: flex;
  gap: var(--spacing-s);
  align-items: center;
  justify-content: center;
}

.swiper-pagination-bullet {
  background-color: var(--color-text-extra-light);
  width: var(--spacing-s);
  height: var(--spacing-s);
  border-radius: var(--rounded-l);
  transition: background-color 0.25s ease;
}

.swiper-pagination-bullet-active {
  background-color: var(--color-text-light);
}