/* ==========================================
   FAST PREMIUM HERO BANNER
========================================== */

.hero {
    padding: 12px 16px 8px;
}

.slider {
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    contain: layout paint;
}

.slides {
    display: flex;
    width: 100%;
    transform: translate3d(0, 0, 0);
    transition: transform 0.45s ease;
    will-change: transform;
}

.slide {
    min-width: 100%;
    width: 100%;
    flex: 0 0 100%;
}

.slide img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    border-radius: 20px;

    /* Prevent layout shift */
    background: #f5f5f5;

    /* Better image rendering/loading */
    image-rendering: auto;
}

/* Dots */

.dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 9px;
    height: 10px;
}

.dot {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #d9d9d9;
    transition: width 0.25s ease, background 0.25s ease;
}

.dot.active {
    width: 28px;
    border-radius: 20px;
    background: #111;
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767px) {

    .hero {
        padding: 10px 12px 6px;
    }

    .slider {
        border-radius: 18px;
    }

    .slide img {
        aspect-ratio: 16 / 8;
        object-fit: cover;
        border-radius: 18px;
    }

    .slider-btn {
        display: none;
    }

    .dots {
        margin-top: 8px;
    }
}

/* ==========================================
   TABLET
========================================== */

@media (min-width: 768px) and (max-width: 991px) {

    .hero {
        padding: 14px 18px 8px;
    }

    .slide img {
        aspect-ratio: 16 / 7;
    }
}

/* ==========================================
   LAPTOP
========================================== */

@media (min-width: 992px) and (max-width: 1199px) {

    .hero {
        padding: 18px 20px 10px;
    }
}

/* ==========================================
   DESKTOP
========================================== */

@media (min-width: 1200px) {

    .hero {
        padding: 22px 24px 12px;
    }
}