html { scroll-padding-top: 150px; }

/* --- Gallery Grid Layout --- */
.gallery {
    /* Use CSS Grid for a clean, responsive layout */
    display: grid;
    /* Auto-fit columns: 3 columns on large screens, 2 on medium, 1 on small */
	grid-template-columns: repeat(9, 1fr);
    gap: 15px; /* Spacing between images */
    padding: 20px;
    max-width: 1400px; /* Max width to keep content centered on huge screens */
    margin: 0 auto; /* Center the grid */
}

/* Style the image container (the <a> tag) */
.gallery a {
    display: block;
    overflow: hidden; /* Important for the hover effect */
    border: 1px solid #333; /* Subtle border for definition */
    border-radius: 4px; /* Slight rounding */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Subtle shadow */
    transition: transform 0.3s ease-in-out;
}

/* Style the image itself */
.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images fill their box without stretching */
    display: block;
	border-radius: 4px; /* Slight rounding */
    transition: transform 0.3s ease-in-out;
}

/* Hover effect: Zoom image slightly when hovered */
.gallery a:hover img {
    transform: scale(1.05);
}

@media (max-width: 768px) {

.gallery {
    /* Use CSS Grid for a clean, responsive layout */
    display: grid;
    /* Auto-fit columns: 3 columns on large screens, 2 on medium, 1 on small */
	grid-template-columns: repeat(5, 1fr);
    gap: 15px; /* Spacing between images */
    padding: 20px;
    max-width: 1400px; /* Max width to keep content centered on huge screens */
    margin: 0 auto; /* Center the grid */
}

}