/* Mobile fixes for image grid and menu */
@media (max-width: 767px) {
    /* Fix for image grid on mobile - NEW GRID LAYOUT */
    .image-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Two equal columns */
        grid-auto-rows: auto !important; /* Rows adjust to content */
        gap: 10px !important;
        height: auto !important; /* Let height be determined by content */
        padding: 10px !important; /* Add some padding around the grid */
    }
    
    .grid-item { /* General reset for mobile grid items */
        width: 100% !important;
        height: auto !important; /* Let aspect ratio or content define height */
        max-height: none !important; /* Remove fixed max-height from previous mobile style */
        min-height: 0 !important;
        grid-column: auto !important; /* Reset desktop spans */
        grid-row: auto !important; /* Reset desktop spans */
        overflow: hidden !important; /* Ensure images don't overflow */
    }
    
    .grid-item img {
        width: 100% !important;
        height: 100% !important; /* Make image fill the grid item */
        object-fit: cover !important;
        display: block !important;
    }
    
    .image-grid .grid-item.large { /* First child in HTML */
        grid-column: 1 / span 2 !important; /* Full width */
        grid-row: 1 !important;
        aspect-ratio: 1.8 / 1 !important; /* Wider than tall, e.g., landscape-ish */
    }
    
    .image-grid .grid-item:nth-child(2).small { /* Second child in HTML, first small item */
        grid-column: 1 / span 1 !important;
        grid-row: 2 !important;
        aspect-ratio: 1 / 1 !important; /* Square */
    }
    
    .image-grid .grid-item:nth-child(3).small { /* Third child in HTML, second small item */
        grid-column: 2 / span 1 !important;
        grid-row: 2 !important;
        aspect-ratio: 1 / 1 !important; /* Square */
    }
    
    .image-grid .grid-item.large-right { /* Fourth child in HTML */
        grid-column: 1 / span 2 !important; /* Full width */
        grid-row: 3 !important;
        aspect-ratio: 1.8 / 1 !important; /* Wider than tall */
    }
    
    /* Adjust Swiper height for mobile */
    .swiper.grid-slider {
        height: auto !important;
    }
    
    .swiper-slide {
        height: auto !important;
    }
    
    /* Navigation arrows for image grid - HIDE ON MOBILE */
    .grid-slider-prev,
    .grid-slider-next {
        display: none !important; /* Hide arrows on mobile */
        /* The rest of the properties are kept for clarity but are overridden by display: none */
        width: 40px !important;
        height: 40px !important;
        background-color: rgba(0, 0, 0, 0.5) !important;
        border-radius: 50% !important;
        align-items: center !important;
        justify-content: center !important; 
        z-index: 10 !important;
    }

    .grid-slider-prev {
        left: 15px !important; 
    }

    .grid-slider-next {
        right: 15px !important; 
    }
}