.nf-banner-slider {
  position: relative;
  width: var(--nf-viewport, 100vw);
  max-width: none !important;
  margin: 0 0 0 var(--nf-offset, calc((100% - 100vw) / 2));
  padding: 0;
}
.nf-banner-track {
  display: flex;
  direction: ltr;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.nf-banner-track::-webkit-scrollbar { display: none; }
.nf-banner-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.nf-banner-slide a, .nf-banner-slide picture, .nf-banner-slide img { display: block; }
.nf-banner-slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 1916 / 821;
  object-fit: cover;
  margin: 0;
}
.nf-banner-dots {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  max-width: 100%;
}
.nf-banner-dots button {
  display: grid;
  place-items: center;
  width: clamp(23px, 6.2vw, 32px);
  height: 36px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.nf-banner-dots button::after {
  content: "";
  width: 9px;
  height: 9px;
  border: 1px solid white;
  border-radius: 50%;
  background: var(--nf-dot);
  opacity: .55;
}
.nf-banner-dots button[aria-current="true"]::after { opacity: 1; transform: scale(1.25); }
.nf-banner-dots button:focus-visible { outline: 2px solid var(--nf-dot); outline-offset: -2px; }
@media (max-width: 767px) {
  .nf-banner-slide img { aspect-ratio: 1122 / 1402; }
}

/* Keep theme button styles from adding a background around the dots. */
.nf-banner-slider .nf-banner-dots button,
.nf-banner-slider .nf-banner-dots button:hover,
.nf-banner-slider .nf-banner-dots button:active,
.nf-banner-slider .nf-banner-dots button:focus {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
.nf-banner-slider .nf-banner-dots button::before { content: none !important; }