/* Mobile Hero Image Optimization
 * This file contains styles for mobile-optimized hero images
 * If you decide to use separate cropped images for mobile,
 * uncomment the relevant sections below
 */

/* 
 * To use mobile-specific images:
 * 1. Create mobile-optimized versions of your hero images
 * 2. Name them with "-mobile" suffix (e.g., home-mobile.jpg)
 * 3. Place them in the img folder
 * 4. Uncomment the styles below
 */

/*
@media (max-width: 768px) {
    .hero.home-hero {
        background-image: url('../img/home-mobile.jpg') !important;
    }
    
    .exhibitors-hero {
        background-image: url('../img/exhibitors-mobile.jpg') !important;
    }
    
    .event-hero {
        background-image: url('../img/C&T_beeses_bristol_rainy_day_wedding_rubywalkerphoto-308.jpg') !important;
    }
}
*/

/* 
 * Recommended mobile image dimensions:
 * Width: 768px
 * Height: 500px
 * Format: JPG (optimized for web)
 * Focus: Center the most important part of the image
 * File size: Keep under 100KB if possible
 */

/* 
 * If you decide to use separate mobile images:
 * 1. Create the images at the recommended dimensions
 * 2. Crop them to focus on the most important part
 * 3. Optimize them for web to reduce file size
 * 4. Uncomment the styles above
 * 5. Include this CSS file in your header.php
 */