.fbec-carousel {
    --fbec-gap: 20px;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.fbec-viewport {
    width: 100%;
    overflow: hidden;
}

.fbec-track {
    display: flex;
    gap: var(--fbec-gap);
    width: 100%;
    transition: transform 500ms ease;
    will-change: transform;
}

.fbec-slide {
    flex: 0 0 calc((100% - (var(--fbec-gap) * (var(--fbec-slides, 1) - 1))) / var(--fbec-slides, 1));
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fbec-slide img {
    display: block;
    width: 100%;
    height: 420px;
    object-fit: contain;
    border-radius: 0;
}

.fbec-link {
    display: block;
    width: 100%;
}

.fbec-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.fbec-prev { left: 12px; }
.fbec-next { right: 12px; }

.fbec-arrow:hover {
    background: rgba(0,0,0,.75);
}

.fbec-dots {
    display: flex;
    gap: 7px;
    justify-content: center;
    align-items: center;
    margin-top: 14px;
}

.fbec-dot {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    background: rgba(0,0,0,.3);
}

.fbec-dot.is-active {
    transform: scale(1.25);
    background: rgba(0,0,0,.75);
}

.fbec-effect-fade .fbec-track {
    display: block;
    position: relative;
}

.fbec-effect-fade .fbec-slide {
    display: none;
    width: 100%;
}

.fbec-effect-fade .fbec-slide.is-active {
    display: flex;
}

.fbec-notice {
    padding: 18px;
    border: 1px dashed #aaa;
    background: #f7f7f7;
    color: #333;
    text-align: center;
}

@media (max-width: 1024px) {
    .fbec-carousel[data-tablet-slides="1"] { --fbec-slides: 1; }
    .fbec-carousel[data-tablet-slides="2"] { --fbec-slides: 2; }
    .fbec-carousel[data-tablet-slides="3"] { --fbec-slides: 3; }
    .fbec-carousel[data-tablet-slides="4"] { --fbec-slides: 4; }
}

@media (max-width: 767px) {
    .fbec-carousel { --fbec-slides: 1 !important; }
    .fbec-slide img { height: auto; max-height: 80vh; }
    .fbec-arrow { width: 36px; height: 36px; font-size: 20px; }
}