.banner-container {
    background:#fff;
    margin:auto;
}

.bechify-banners-section {
    padding:0;
    background:#fff;
}

.banner-content,
.banner-skeleton {
    height:150px;
}

.banner-skeleton {
    position:relative;
    background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);
    background-size:200% 100%;
    animation:1.5s infinite shimmer;
    border-radius:8px;
    overflow:hidden;
}

.banner-skeleton .skeleton-shimmer {
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,transparent,rgb(255 255 255 / .5),transparent);
    animation:1.5s infinite shimmerMove;
}

@keyframes shimmer {
    0% { background-position:200% 0; }
    100% { background-position:-200% 0; }
}

@keyframes shimmerMove {
    0% { transform:translateX(-100%); }
    100% { transform:translateX(100%); }
}

.banner-single,
.banner-slider {
    border-radius:8px;
    overflow:hidden;
    height:100%;
}

.banner-single a,
.banner-slide a {
    display:block;
    height:100%;
}

.banner-single a {
    transition:opacity .3s;
}

.banner-single a:hover {
    opacity:.95;
}

.banner-picture {
    display:block;
    width:100%;
    height:100%;
}

.banner-img {
    display:block;
    width:100%;
    height:100%;
    object-fit:fill;
}

.banner-slider {
    position:relative;
}

.banner-track {
    display:flex;
    height:100%;
    transition:transform .4s cubic-bezier(.4, 0, .2, 1);
}

.banner-slide {
    min-width:100%;
    height:100%;
    position:relative;
}

.banner-nav {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:10;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgb(0 0 0 / .45);
    color:#fff;
    border:none;
    width:32px;
    height:32px;
    border-radius:50%;
    font-size:16px;
    line-height:1;
    cursor:pointer;
    transition:background .3s;
}

.banner-nav:hover {
    background:rgb(0 0 0 / .7);
}

.banner-nav.prev {
    left:10px;
}

.banner-nav.next {
    right:10px;
}

.banner-dots {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:6px;
    z-index:10;
}

.banner-dots .dot {
    width:8px;
    height:8px;
    border-radius:50%;
    background:rgb(255 255 255 / .5);
    border:none;
    cursor:pointer;
    padding:0;
    transition:.3s;
}

.banner-dots .dot.active {
    background:#fff;
    width:20px;
    border-radius:5px;
}

.banner-dots .dot:hover {
    background:rgb(255 255 255 / .8);
}

@media (min-width:480px) {
    .banner-content,
    .banner-skeleton {
        height:150px;
    }
}

@media (min-width:780px) {
    .banner-content,
    .banner-skeleton {
        height:180px;
    }
}

@media (min-width:1080px) {
    .banner-content,
    .banner-skeleton {
        height:200px;
    }
}

html.night-mode .banner-container,
html.night-mode .bechify-banners-section {
    background:#111;
}

html.night-mode .banner-skeleton {
    background:linear-gradient(90deg,#1e1e1e 25%,#2a2a2a 50%,#1e1e1e 75%);
    background-size:200% 100%;
}