/* Frontend Masonry Grid */
.bdg-grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}

.bdg-grid-item {
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
}

.bdg-grid-item img,
.bdg-grid-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}



.bdg-swiper {
    --bdg-primary: #fcd440;
    --bdg-secondary: #ff8c42;
}

.swiper-button-next,
.swiper-button-prev {
    color: var(--bdg-secondary);
}

.swiper-pagination-bullet-active {
    background: var(--bdg-primary);
}

/* ===============================
   Aspect Ratio Control
   =============================== */

.bdg-swiper {
    width: 100%;
    position: relative;
    overflow: hidden;
}


/* Auto = content decides (not recommended but allowed) */
.bdg-swiper.ratio-auto {
    aspect-ratio: auto;
}

/* Force slides to fill */
.bdg-swiper .swiper-wrapper,
.bdg-swiper .swiper-slide {
    height: 100%;
}

/* Media fills area */
.bdg-swiper img,
.bdg-swiper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* ===============================
   SLIDE ASPECT RATIO (CORRECT)
   =============================== */

.bdg-swiper .swiper-slide {
    aspect-ratio: 16 / 9;   /* default */
}

/* Per-gallery ratios */
.bdg-swiper.ratio-4x5 .swiper-slide { aspect-ratio: 4 / 5; }
.bdg-swiper.ratio-1x1 .swiper-slide { aspect-ratio: 1 / 1; }
.bdg-swiper.ratio-auto .swiper-slide { aspect-ratio: auto; }

/* Responsive override */
@media (max-width: 600px) {
    .bdg-swiper .swiper-slide {
        aspect-ratio: 1 / 1;
    }
}

/* Media fill slide */
.bdg-swiper img,
.bdg-swiper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}