.bc {
    --bc-per-view: 1; 
    --bc-gap: 16px;
    --bc-radius: 12px;
    --bc-ratio: 2 / 3;

    max-width: 1200px;
    margin: 1rem auto;
}

@media (min-width: 640px)  { .bc { --bc-per-view: 2; } }
@media (min-width: 960px)  { .bc { --bc-per-view: 3; } }

.bc__viewport {
    overflow: hidden;
    border-radius: var(--bc-radius);
    container-type: inline-size; 
}

.bc__track {
    display: flex;
    width: max-content; 
    margin: 0;
    padding: 0;
    list-style: none;
    animation: bc-scroll var(--bc-duration, 40s) linear infinite;
    will-change: transform;
}

.bc__slide {
    flex: 0 0 auto;
    width: calc((min(100vw, 1200px) - var(--bc-gap) * (var(--bc-per-view) - 1)) / var(--bc-per-view));
    width: calc((100cqw - var(--bc-gap) * (var(--bc-per-view) - 1)) / var(--bc-per-view));
    margin-right: var(--bc-gap);
}

.bc__slide img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--bc-ratio);
    object-fit: cover;
    border-radius: var(--bc-radius);
    user-select: none;
    -webkit-user-drag: none;
}

@keyframes bc-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .bc__track { animation: none; }
    .bc__viewport { overflow-x: auto; }
    .bc__slide[aria-hidden="true"] { display: none; }
}