/* --- Global/Container Styles --- */
body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

.container {
    max-width: 1200px; /* Max width of the content area */
    margin: 0 auto; /* Center the container */
    padding: 20px;
}

.grax_tm_title_holder {
    text-align: center;
    margin-bottom: 40px;
    padding-top: 20px;
}

.grax_tm_title_holder h3 {
    font-size: 36px;
    font-weight: 700;
    color: #333;
    letter-spacing: 1px;
}

.grax_tm_title_holder span {
    color: #007bff; /* Highlight color for the span */
}

/* --- Gallery Grid Styles (The Core) --- */
.gallery-grid {
    display: grid;
    /* This creates the responsive columns:
       - minmax(250px, 1fr) ensures each column is at least 250px wide.
       - auto-fit creates as many columns as will fit on the screen. */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px; /* Spacing between grid items */
}

.gallery-grid img {
    width: 100%; /* Make image fill its grid cell */
    height: 250px; /* Fixed height for consistent look */
    object-fit: cover; /* Ensures image covers the area without distortion */
    border-radius: 8px; /* Rounded corners for a softer look */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: transform 0.3s ease; /* Smooth hover effect */
}

.gallery-grid img:hover {
    transform: scale(1.03); /* Slight zoom on hover */
    z-index: 10;
}

/* --- Optional: Media Query for smaller screens --- */
@media (max-width: 600px) {
    .gallery-grid {
        /* On small screens, use fewer columns */
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}
/* Hide the mobile image by default and show the desktop image */
.mobile-only { display: none; }
.desktop-only { display: block; } 

@media (max-width: 768px) {
    /* On small screens, hide the desktop image and show the mobile image */
    .desktop-only { display: none; }
    .mobile-only { display: block; }
    /* ---------------------------------------- */
/* MOBILE BANNER STYLES - START             */
/* ---------------------------------------- */

@media (max-width: 768px) {
    /* HIDES THE ELEMENT THAT CONTAINS THE DESKTOP IMAGE */
    .grax_tm_hero .bg .image[data-img-url] {
        /* This hides the element that the theme uses to load the desktop image */
        display: none !important;
    }
    
    /* Show the mobile banner using the new background-image method */
    .grax_tm_hero .bg {
         /* If you still need a dedicated element for the mobile background */
         position: relative; 
         min-height: 400px;
    }

    /* Target the container element and apply the mobile background image */
    .grax_tm_hero .bg .image {
        background-image: url('../img/slider/1-mobile.jpg') !important;
        height: 400px;
        background-position: center center !important;
        /* Ensure it is visible again after being potentially hidden by JS init */
        display: block !important; 
    }

    /* Optional: If you need to make the whole hero section shorter on mobile */
    .grax_tm_hero {
        min-height: 400px; /* Match the image height */
    }
}
}