.bce-carousel { position: relative; width: 100%; overflow: hidden; }
.bce-track { display: flex; will-change: transform; }
.bce-slide { flex: 0 0 auto; }
.bce-box {
  position: relative;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  height: 320px;
}
.bce-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.55));
}
.bce-inner { position: relative; z-index: 2; padding: 16px; color: #fff; width: 100%; }
.bce-title { margin: 0 0 8px; color: inherit; }
.bce-content { color: inherit; }

.bce-prev, .bce-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.5); color: #fff; border: 0; width: 36px; height: 36px; border-radius: 18px;
  cursor: pointer;
}
.bce-prev { left: 8px; }
.bce-next { right: 8px; }

.bce-dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 8px; display: flex; gap: 8px; }
.bce-dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; background: rgba(255,255,255,.5); }
.bce-dots button.active { background: #fff; }