/* Image Gallery */
.image-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 10px;
    width: 100%;
}

.gallery-item {
    width: 100%;
    /* Keep the aspect ratio approximately 300x250 => 1.2 aspect ratio */
    aspect-ratio: 300 / 250;
    height: auto;
    overflow: hidden;
    background: #1e1e1e; /* Changed from #f0f0f0 to match card background */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #333;
    border-radius: 8px;
}

/* Ensure 300x250 min size logic if possible, or just responsive */
/* The user asked for "300x250 size" initially, then "4 across".
   If we expand the container, we can get close to 300x250. */

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Changed from cover to show full image */
    transition: transform 0.3s ease;
}

.gallery-item img:hover {
    transform: scale(1.05);
}

.gallery-ad {
    background: transparent;
    overflow: hidden; /* Prevent ad overflow */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .image-gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .image-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .image-gallery-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}