:root {
    --main-desktop-height: 420px;     
    --main-tablet-height: 330px;      
    --main-mobile-height: 220px;      

    --quad-desktop-height: 280px;     
    --quad-tablet-height: 240px;      
    --quad-mobile-height: 240px;      

    --dual-desktop-height: 280px;     
    --dual-tablet-height: 240px;      
    --dual-mobile-height: 160px;      

    --layout-gap: 5px;           
    --container-padding: 0px;    
    --section-margin-bottom: 4px; 
    --border-radius: 6px;        
    --gold-color: #D4AF37;       
    --glass-bg: rgba(10, 25, 47, 0.4);
    --glass-blur: blur(4px);
}

/* --- 1. SHARED BASE LAYOUT CONTAINERS --- */
.main-layout-container,
.quad-layout-container,
.dual-layout-container {
    display: flex !important;
    gap: var(--layout-gap) !important;
    width: 100% !important;
    max-width: 1200px !important;        
    margin-left: auto !important;        
    margin-right: auto !important;       
    margin-bottom: var(--section-margin-bottom) !important;
    padding-left: var(--container-padding) !important;
    padding-right: var(--container-padding) !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Specific Heights */
.main-layout-container {
    height: var(--main-desktop-height) !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}

.quad-layout-container {
    height: var(--quad-desktop-height) !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}

.dual-layout-container {
    height: var(--dual-desktop-height) !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}

/* --- 2. FIRST CONTAINER STRUCTURE (65% / 35%) --- */
.left-main-box {
    flex: 0 0 calc(65% - (var(--layout-gap) / 2)) !important;
    width: calc(65% - (var(--layout-gap) / 2)) !important;
    height: 100% !important;
    position: relative !important;
    border-radius: var(--border-radius) !important;
    overflow: hidden !important;
}

.right-sub-container {
    flex: 0 0 calc(35% - (var(--layout-gap) / 2)) !important;
    width: calc(35% - (var(--layout-gap) / 2)) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: var(--layout-gap) !important;
    height: 100% !important;
}

.sub-image-box {
    flex: 1 !important;
    width: 100% !important;
    height: calc(50% - (var(--layout-gap) / 2)) !important;
    position: relative !important;
    border-radius: var(--border-radius) !important;
    overflow: hidden !important;
}

/* --- 3. QUAD CONTAINER STRUCTURE (4 Boxes) --- */
.quad-layout-container .quad-box {
    flex: 0 0 calc(25% - (var(--layout-gap) * 3 / 4)) !important;
    width: calc(25% - (var(--layout-gap) * 3 / 4)) !important;
    height: 100% !important;
    position: relative !important;
    border-radius: var(--border-radius) !important;
    overflow: hidden !important;
}

/* --- 4. DUAL CONTAINER STRUCTURE (2 Boxes) --- */
.dual-layout-container .dual-box,
.dual-layout-container .video-carousel-box,
.dual-layout-container .review-box {
    flex: 0 0 calc(50% - (var(--layout-gap) / 2)) !important;
    width: 50% !important;
    height: 100% !important;
    position: relative !important;
    border-radius: var(--border-radius) !important;
    overflow: hidden !important;
}

.video-carousel-box { background: #000 !important; }

/* --- 5. IMAGES & LINKS --- */
.image-link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    text-decoration: none !important;
}

.image-link img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: var(--border-radius) !important;
    transition: transform 0.3s ease-in-out !important;
}

.image-link:hover img {
    transform: scale(1.02) !important;
}

/* --- 6. HEADINGS & OVERLAYS --- */
.overlay-heading {
    position: absolute !important;
    bottom: 4px !important;
    left: 4px !important;
    right: 4px !important;
    margin: 0 !important;
    z-index: 10 !important;
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    font-size: clamp(0.8rem, 1vw, 1.1rem) !important;
    line-height: 1.15 !important;
    color: var(--gold-color) !important;
    font-weight: 700 !important;
    text-align: left !important;
}

/* --- 7. TABLET VIEW (769px to 1024px) --- */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .main-layout-container {
        height: var(--main-tablet-height) !important;
    }
    .quad-layout-container {
        height: var(--quad-tablet-height) !important;
    }
    .dual-layout-container {
        height: var(--dual-tablet-height) !important;
    }
}

/* --- 8. MOBILE VIEW (Up to 768px) --- */
@media screen and (max-width: 768px) {
    .main-layout-container {
        flex-direction: column !important;
        height: auto !important;
    }
    .main-layout-container .left-main-box {
        flex: none !important;
        width: 100% !important;
        height: var(--main-mobile-height) !important;
        margin-bottom: var(--layout-gap) !important;
    }
    .main-layout-container .right-sub-container {
        flex: none !important;
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: var(--layout-gap) !important;
    }
    .main-layout-container .sub-image-box {
        flex: none !important;
        width: 100% !important;
        height: 110px !important;
        margin-bottom: 0px !important;
    }

    /* Quad Layout: 2x2 Grid on Mobile */
    .quad-layout-container {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        height: auto !important;
    }
    .quad-layout-container .quad-box {
        flex: 0 0 calc(50% - (var(--layout-gap) / 2)) !important;
        width: calc(50% - (var(--layout-gap) / 2)) !important;
        height: var(--quad-mobile-height) !important;
        margin-bottom: var(--layout-gap) !important;
    }

    /* Dual Layout: Stacked on Mobile */
    .dual-layout-container {
        flex-direction: column !important;
        height: auto !important;
    }
    .dual-layout-container .dual-box,
    .dual-layout-container .video-carousel-box,
    .dual-layout-container .review-box {
        flex: none !important;
        width: 100% !important;
        height: var(--dual-mobile-height) !important;
        margin-bottom: var(--layout-gap) !important;
    }
}