.bnr { position: relative; overflow: hidden; }
.bnr__viewport { overflow: hidden; }
.bnr__track { display: flex; transition: transform .5s ease; will-change: transform; }
.bnr__slide { flex: 0 0 100%; min-width: 0; }
.bnr__slide, .bnr__slide > a { display: block; }
.bnr__slide img {
    display: block;
    width: 100%;
    aspect-ratio: var(--bnr-aspect, 8 / 3);
    object-fit: cover;
}
.bnr__arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(0, 0, 0, .45); color: #fff; font-size: 26px; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .2s ease;
}
.bnr__arrow:hover { background: var(--bnr-accent, rgba(0, 0, 0, .8)); }
.bnr__arrow--prev { left: 14px; }
.bnr__arrow--next { right: 14px; }
.bnr__dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3;
    display: flex; gap: 8px; justify-content: center; }
.bnr__dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .55); cursor: pointer; transition: background .2s, transform .2s; }
.bnr__dot:hover { background: rgba(255, 255, 255, .85); }
.bnr__dot.is-active { background: var(--bnr-accent, #fff); transform: scale(1.25); }
.bnr--single .bnr__arrow, .bnr--single .bnr__dots { display: none; }
@media (max-width: 48em) {
    .bnr__arrow { width: 34px; height: 34px; font-size: 20px; }
    .bnr__arrow--prev { left: 8px; }
    .bnr__arrow--next { right: 8px; }
    .bnr__dots { bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .bnr__track { transition: none; }
}