/* =========================================================
   Banner 3-Column Flex Layout (Image | Video | Image)
========================================================= */

.banner-flex-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

/* Ensure images and video fill their columns correctly */
.banner-flex-container img, 
.banner-flex-container video {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ---------------------------------------------------------
   Mobile & Tablet View (Max Width 991px)
   Order: 1. Video, 2. Left Image, 3. Right Image
--------------------------------------------------------- */
@media (max-width: 991px) {
    .banner-flex-container {
        flex-direction: column;
    }
    
    .banner-center-video {
        order: 1;
        margin-bottom: 20px;
    }
    
    .banner-left-img {
        order: 2;
        margin-bottom: 20px;
    }
    
    .banner-right-img {
        order: 3;
        margin-bottom: 20px;
    }
}

/* ---------------------------------------------------------
   Desktop View (Min Width 992px - standard Bootstrap md)
   Order: 1. Left Image, 2. Video, 3. Right Image
--------------------------------------------------------- */
@media (min-width: 992px) {
    .banner-flex-container {
        flex-direction: row;
        align-items: center; /* Vertically centers the items so heights look balanced */
    }
    
    .banner-left-img {
        order: 1;
    }
    
    .banner-center-video {
        order: 2;
    }
    
    .banner-right-img {
        order: 3;
    }
}