.bannerCarousel {
  display: flex;
  flex-flow: row nowrap;
  gap: 1rem;
}
.bannerCarousel__nav {
  width: 5rem;
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 1rem;

  list-style: none;
}
.bannerCarousel__nav__item {
  display: block;
  width: 100%;

  aspect-ratio: 1/1;
  border-radius: var(--radius-3);
  box-shadow: 3px 5px 10px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  transition: var(--transition);
}
.bannerCarousel__nav__item:not(.active):not(:hover) {
  opacity: 0.3;
  box-shadow: none;
}

.bannerCarousel__scroller {
  flex-grow: 1;
  display: flex;
  flex-flow: row nowrap;
  transition: 0.5s ease;
  width: 100%;

  aspect-ratio: 16/7;
  border-radius: var(--radius-3);
  overflow: hidden;
}
.bannerCarousel__scroller__item {
  min-width: 100%;
}

@media screen and (max-width: 595px) {
  .bannerCarousel {
    flex-flow: column-reverse nowrap;
  }
  .bannerCarousel__nav {
    width: 100%;
    flex-flow: row nowrap;
  }
  .bannerCarousel__nav__item {
    width: auto;
    height: 4rem;
  }
  .bannerCarousel__scroller {
    aspect-ratio: 16/10;
  }
}