/*
 * Carousel
 */

.carousel {
  height: 75vh;
  min-height: 468px;
  overflow: hidden;
}

.carousel-slide {
  height: 100%;
  left: 0;
  opacity: 0;
  top: 0;
  transition: opacity .5s ease-in-out;
  z-index: 0;
}

.carousel-slide.is-active {
  opacity: 1;
  z-index: 1;
}

.carousel-slide-image {
  height: 100%;
  object-fit: cover;
}

.carousel-overlay {
  bottom: 3rem;
  left: 3rem;
}

.carousel-pagination-bar {
  width: 64px;
}

@media (min-width: 1600px) {
  .carousel-overlay {
    left: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 1536px;
    right: 0;
  }
}

@media (max-width: 768px) {
  .carousel-overlay {
    left: 1rem;
    right: 1rem;
  }
}

.author-overlay {
  bottom: 1rem;
  right: 1rem;
}

.carousel-content {
  background: rgba(0 0 0 / .6);
  max-width: fit-content;
}

.carousel-pagination {
  bottom: var(--space-2);
  gap: var(--space-1);
  left: 50%;
  transform: translateX(-50%);
}

.carousel-pagination-bar {
  background: rgba(255 255 255 / .5);
  border: none;
  cursor: pointer;
  height: 4px;
  transition: background .25s ease;
  width: 32px;
}

@media (min-width: 768px) {
  .carousel-pagination-bar {
     width: 64px;
  }
}

.carousel-pagination-bar:hover {
  background: rgba(255 255 255 / .75);
}

.carousel-pagination-bar.is-active {
  background: var(--white);
}