@layer components {
  .image-carousel__image {
    min-height: 17.2rem;
    aspect-ratio: 304/172;
  }
  .image-carousel .carousel-arrow {
    position: absolute;
    inset-inline-end: 0;
    bottom: 0;
    z-index: 2;
  }
  .image-carousel .carousel-arrow__counter {
    visibility: hidden;
  }
  .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(--general-focus-border);
    outline-offset: -4px;
  }
  .image-carousel__thumbnails .arrow-button {
    position: absolute;
    top: calc(50% - 1.6rem);
    z-index: 2;
  }
  .image-carousel__thumbnails .arrow-button:first-of-type {
    inset-inline-start: 0;
  }
  .image-carousel__thumbnails .arrow-button:last-of-type {
    inset-inline-end: 0;
  }
  @media (min-width: 768px) {
    .image-carousel__image {
      min-height: 36.8rem;
      aspect-ratio: 656/368;
    }
    .image-carousel .caption {
      position: absolute;
      bottom: 0;
      inset-inline-start: 0;
      width: 100%;
      background: var(--gradient-overlay-bottom);
      padding: var(--sm-1);
      padding-inline-end: 15%;
    }
    .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(--card-active-border);
      outline-offset: -8px;
    }
    .image-carousel--thumbnails .caption {
      padding-inline-end: 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;
    }
  }
}