/* ============================================================
   Justified Pattern Grid (Fully Responsive, No Crop)
   ============================================================ */

/* Main Container: Ab saari images ek hi container me hongi aur wrap hongi */
.custom-justified-wrapper {
    display: flex;
    flex-wrap: wrap; /* Ye images ko automatically next line me bhejega */
    width: 100%;
    /* Gap Elementor widget se dynamically aayega, ye ek fallback hai */
    --gap: 10px; 
}

/* Magic Formula (Desktop): 
   Fraction (--fd) aur Columns (--cd) PHP se dynamically aayenge.
   0.1px subtract kiya gaya hai taaki browser screen chhoti-badi karne par grid niche na gire.
*/
.justified-item {
    width: calc( (var(--fd) * 100%) - (var(--gap, 0px) * (var(--cd) - 1) * var(--fd)) - 0.1px );
    position: relative;
    box-sizing: border-box;
}

/* Image tag styling: Aspect ratio container se automatically match hoga */
.justified-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================================
   RESPONSIVE LAYOUTS (Tablet & Mobile Fix)
   ============================================================ */

/* Tablet (1024px ya usse kam) ke liye --ft (fraction tablet) ka use */
@media (max-width: 1024px) {
    .justified-item {
        width: calc( (var(--ft) * 100%) - (var(--gap, 0px) * (var(--ct) - 1) * var(--ft)) - 0.1px );
    }
}

/* Mobile (767px ya usse kam) ke liye --fm (fraction mobile) ka use */
@media (max-width: 767px) {
    .justified-item {
        width: calc( (var(--fm) * 100%) - (var(--gap, 0px) * (var(--cm) - 1) * var(--fm)) - 0.1px );
    }
}