@charset "UTF-8";
/* CSS Document */
/* Tom Hunter Photography © */



/* IMAGE TABLE (GRID) */

/* --- Main 3-Column Grid Container --- */
.image-grid-3col {
    display: grid;
    /* Forces exactly 3 equal column tracks */
    grid-template-columns: repeat(3, 1fr); 
    /* Perfect horizontal and vertical breathing room between images */
    gap: 40px; 
    max-width: 100%;
    max-width: 750px;
    margin: 0 auto;
    padding: 20px;
}

/* --- Individual Image Cells (Anchor Wrappers) --- */
.lightbox-link {
    display: block;
    /* Keeps all items completely uniform regardless of original photo sizes */
    aspect-ratio: 4 / 3; 
    border-radius: 8px; /* Modern subtle rounded corners */
    overflow: hidden; /* Cleanly cuts off image zoom effect at the corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* --- Image Behavior --- */
.lightbox-link img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crops center beautifully without squishing or distorting */
    transition: filter 0.25s ease;
}

/* --- Smooth Hover Micro-animations --- */
.lightbox-link:hover {
    transform: translateY(-4px); /* Clean floating lift */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    /* Drops to 2 columns on tablets and medium screens */
    .image-grid-3col {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

@media (max-width: 480px) {
    /* Collapses to 1 beautiful column on mobile phones so items remain highly visible */
    .image-grid-3col {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
}