.image-carousel__image {
  min-height: 17.2rem;
  aspect-ratio: 304/172
}
.image-carousel .carousel-arrow {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2
}
.image-carousel .carousel-arrow__counter {
  color: var(--base-5);
  visibility: hidden
}
.image-carousel .carousel-arrow .arrow-button {
  background-color: var(--base-5);
  color: var(--base-1)
}
.image-carousel .carousel-arrow .arrow-button:hover {
  background-color: var(--base-1);
  color: var(--base-5)
}
.image-carousel__thumbnails .swiper {
  width: calc(100% - 6.4rem - var(--sm-4) * 2)
}
.image-carousel__thumbnails .swiper-slide > div {
  cursor: pointer;
  aspect-ratio: 70/56
}
.image-carousel__thumbnails .swiper-slide-thumb-active {
  outline: solid 4px var(--base-1);
  outline-offset: -4px
}
.image-carousel__thumbnails .arrow-button {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%)
}
.image-carousel__thumbnails .arrow-button:first-of-type {
  left: 0
}
.image-carousel__thumbnails .arrow-button:last-of-type {
  right: 0
}
@media (min-width:768px) {
  .image-carousel__image {
    min-height: 36.8rem;
    aspect-ratio: 656/368
  }
  .image-carousel .caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--gradient-bottom-dark);
    padding: var(--sm-1);
    padding-right: 15%
  }
  .image-carousel .caption .color-body,
  .image-carousel .caption .color-headline,
  .image-carousel .caption a {
    color: var(--base-5)
  }
  .image-carousel .carousel-arrow__counter {
    visibility: visible
  }
  .image-carousel__thumbnails .swiper-slide > div {
    aspect-ratio: 170/120
  }
  .image-carousel__thumbnails .swiper-slide-thumb-active {
    outline: solid 8px var(--base-1);
    outline-offset: -8px
  }
  .image-carousel--thumbnails .caption {
    padding-right: var(--sm-1)
  }
}
@media (min-width:1200px) {
  .image-carousel__image {
    max-height: 70rem;
    aspect-ratio: 1248/700
  }
  .image-carousel__thumbnails .swiper-slide > div {
    aspect-ratio: 260/185
  }
}
.section-dark .image-carousel__thumbnails .swiper-slide-thumb-active {
  outline: solid 4px var(--base-5)
}
@media (min-width:768px) {
  .section-dark .image-carousel__thumbnails .swiper-slide-thumb-active {
    outline: solid 8px var(--base-5)
  }
}