.banner-image { background: #faf7fe; }
.banner-image a, .banner-image picture, .banner-image img { display: block; width: 100%; }
.banner-image img { height: auto; aspect-ratio: 1920 / 760; object-fit: contain; }
/* Match the original HTML hero. The artwork size is not the displayed height. */
@media (min-width: 992px) {
  .home-banners { --home-banner-height: 458px; }
  .home-banners .carousel-item { height: var(--home-banner-height); }
  .home-banners .hero,
  .home-banners .hero-container,
  .home-banners .hero-container > .row,
  .home-banners .banner-image,
  .home-banners .banner-image > a,
  .home-banners .banner-image picture { height: 100%; }
  .home-banners .hero-copy { min-height: 0; }
  .home-banners .hero-visual { height: 100%; min-height: 0; }
  .home-banners .banner-image img { height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center; }
}
.banner-navigation { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 12px; background: #faf7fe; }
.banner-navigation > button { width: 36px; height: 36px; border: 1px solid #d9cce9; border-radius: 50%; background: #fff; color: #7542b8; }
.banner-navigation .carousel-indicators { position: static; margin: 0; gap: 6px; flex-wrap: wrap; }
.banner-navigation .carousel-indicators button { width: 10px; height: 10px; border-radius: 50%; background-color: #7542b8; border: 6px solid transparent; background-clip: padding-box; }
.banner-navigation button:focus-visible { outline: 3px solid #7542b8; outline-offset: 2px; }
@media (max-width: 767.98px) { .banner-image img { aspect-ratio: 768 / 960; } }