/* photos.css */

/* For the gallery container itself */
.gallery-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centers images horizontally */
    gap: 15px; /* Adds space between images */
    padding: 20px 0; /* Add some vertical padding */
}

/* Style for the individual thumbnail images */
.thumbnail-img {
    width: 150px; /* Fixed width */
    height: 150px; /* Fixed height, makes them square */
    object-fit: cover; /* This is crucial: it crops the image to fit the dimensions */
    border: 1px solid #ddd; /* Optional: adds a subtle border */
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Optional: adds a subtle shadow */
    transition: transform 0.2s ease-in-out; /* Smooth hover effect */
}

/* Hover effect for thumbnails */
.thumbnail-img:hover {
    transform: scale(1.05); /* Slightly enlarge on hover */
    cursor: pointer; /* Indicate it's clickable */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .thumbnail-img {
        width: 120px; /* Smaller on medium screens */
        height: 120px;
    }
}

@media (max-width: 480px) {
    .thumbnail-img {
        width: 90px; /* Even smaller on very small screens */
        height: 90px;
    }
    .gallery-grid {
        gap: 10px; /* Reduce gap on small screens */
    }
}