/* Carousel v1: layout only. Type, buttons, colours and focus use design-system.css. */
body .rf-carousel [hidden] { display: none !important; }
body .rf-carousel__viewport {
  position: relative;
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  margin-bottom: var(--space-4);
  touch-action: pan-y pinch-zoom;
}
body .rf-carousel__slide { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Override the older hero image width/margin without changing its source proportions. */
body .hero-panel.rf-carousel .rf-carousel__slide img {
  display: block;
  width: 100% !important;
  height: 100%;
  max-height: 100%;
  margin: 0 !important;
  object-fit: contain;
}
body .rf-carousel__controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
body .rf-carousel__controls .rf-button { min-width: 44px; padding-inline: var(--space-3); }
body .rf-carousel__position { min-width: 4ch; text-align: center; }