/* Lazy loading styles */
img[data-src] {
    opacity: 0.5;
    transition: opacity 0.3s ease-in-out;
}

img.loaded {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

/* Optional: Add a placeholder or spinner while loading */
img[data-src]:not(.loaded) {
    background: #f0f0f0 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><circle cx="25" cy="25" r="20" fill="none" stroke="%23ccc" stroke-width="2"><animate attributeName="r" values="15;20;15" dur="1.5s" repeatCount="indefinite"/></circle></svg>') center center no-repeat;
}

/* For images with specific dimensions, you can set a min-height */
img[data-src][style*="height"] {
    min-height: 100px;
}

/* Optional: Add a blur effect to images before they load */
img[data-src]:not(.loaded) {
    filter: blur(5px);
}

img.loaded {
    filter: blur(0);
    transition: filter 0.3s ease-in-out, opacity 0.3s ease-in-out;
}