/* Canvas */
.poo-gallery-grid {
    display: grid;
    /* 12-column grid to approximate your Figma layout */
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: 50px; /* controls vertical granularity */
    gap: 30px;
    max-width: 100%;
}

/* Image cards */
.poo-gallery-item {
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease;
}

.poo-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(0);
    cursor: pointer;
    transition: filter 0.5s ease;
}

.poo-gallery-item:hover img {  
    filter: saturate(1);
}

.poo-gallery-item:hover {
    z-index: 5;
}

/* ------------- DESKTOP COLLAGE POSITIONS ------------- */

/* 1 */
.poo-gallery-item:nth-child(1) {
    grid-column: 2 / span 4;
    grid-row:    3 / span 7;
}

/* 2 */
.poo-gallery-item:nth-child(2) {
    grid-column: 6 / span 4;
    grid-row:    1 / span 8;
}

/* 3 */
.poo-gallery-item:nth-child(3) {
    grid-column: 10 / span 3;
    grid-row:    2 / span 7;
}

/* 4 */
.poo-gallery-item:nth-child(4) {
    grid-column: 1 / span 3;
    grid-row:    9 / span 6;
}

/* 5 */
.poo-gallery-item:nth-child(5) {
    grid-column: 5 / span 5;
    grid-row:    9 / span 7;
}

/* 6 */
.poo-gallery-item:nth-child(6) {
    grid-column: 10 / span 3;
    grid-row:    9 / span 6;
}

/* 7 */
.poo-gallery-item:nth-child(7) {
    grid-column: 1 / span 3;
    grid-row:    15 / span 6;
}

/* 8 */
.poo-gallery-item:nth-child(8) {
    grid-column: 4 / span 3;
    grid-row:    16 / span 6;
}

/* 9 */
.poo-gallery-item:nth-child(9) {
    grid-column: 8 / span 3;
    grid-row:    15 / span 6;
}

/* 10 */
.poo-gallery-item:nth-child(10) {
    grid-column: 11 / span 2;
    grid-row:    16 / span 5;
}

/* ------------- RESPONSIVE BREAKPOINTS ------------- */

/* TABLET (1024px and down) — reset collage and use 3 columns */
@media (max-width: 1024px) {
    .poo-gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: auto;
        gap: 20px;
        padding: 0 20px;
    }

    /* Remove collage-specific positioning */
    .poo-gallery-item {
        grid-column: unset !important;
        grid-row: unset !important;
        height: auto;
    }
}

/* MOBILE (768px and down) — 2 columns */
@media (max-width: 768px) {
    .poo-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 0 15px;
    }
}

/* SMALL PHONE (480px and down) — 1 column */
@media (max-width: 480px) {
    .poo-gallery-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 0 10px;
    }
}