.test-grid-container {
    padding: 5px;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: repeat(6, 150px);
    gap: 0;
}

/* 1 enfant = grille plus petite */
.test-grid-container:has(a:nth-child(1)):not(:has(a:nth-child(2))) {
    grid-template-rows: repeat(4, 150px);
}

.test-grid-class,
.test-grid-class-more {
    display: block;
    padding: 5px;
}

.test-grid-class img,
.test-grid-class-more img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.test-grid-class-more {
    position: relative;
}

.test-grid-class-more p {
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: -5px;
    left: 5px;
    background-color: rgba(88, 88, 88, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 86px;
    border-radius: 4px;
}

/* 1 photo - object-fit contain + grille centrée */
.test-grid-container:has(a:nth-child(1)):not(:has(a:nth-child(2))) a:first-child {
    grid-area: 1 / 1 / 5 / 3;
}
.test-grid-container:has(a:nth-child(1)):not(:has(a:nth-child(2))) a:first-child img {
    object-fit: contain;
}

/* 2 photos - deux colonnes */
.test-grid-container:has(a:nth-child(2)):not(:has(a:nth-child(3))) a:nth-child(1) {
    grid-area: 1 / 1 / 7 / 2;
}
.test-grid-container:has(a:nth-child(2)):not(:has(a:nth-child(3))) a:nth-child(2) {
    grid-area: 1 / 2 / 7 / 3;
}

/* 3 photos - une grande à gauche, deux à droite */
.test-grid-container:has(a:nth-child(3)):not(:has(a:nth-child(4))) a:nth-child(1) {
    grid-area: 1 / 1 / 7 / 2;
}
.test-grid-container:has(a:nth-child(3)):not(:has(a:nth-child(4))) a:nth-child(2) {
    grid-area: 1 / 2 / 4 / 3;
}
.test-grid-container:has(a:nth-child(3)):not(:has(a:nth-child(4))) a:nth-child(3) {
    grid-area: 4 / 2 / 7 / 3;
}

/* 4 photos - grille 2x2 */
.test-grid-container:has(a:nth-child(4)):not(:has(a:nth-child(5))) a:nth-child(1) {
    grid-area: 1 / 1 / 4 / 2;
}
.test-grid-container:has(a:nth-child(4)):not(:has(a:nth-child(5))) a:nth-child(2) {
    grid-area: 4 / 1 / 7 / 2;
}
.test-grid-container:has(a:nth-child(4)):not(:has(a:nth-child(5))) a:nth-child(3) {
    grid-area: 1 / 2 / 4 / 3;
}
.test-grid-container:has(a:nth-child(4)):not(:has(a:nth-child(5))) a:nth-child(4) {
    grid-area: 4 / 2 / 7 / 3;
}

/* 5 photos ou plus */
.test-grid-container:has(a:nth-child(5)) a:nth-child(1) {
    grid-area: 1 / 1 / 4 / 2;
}
.test-grid-container:has(a:nth-child(5)) a:nth-child(2) {
    grid-area: 4 / 1 / 7 / 2;
}
.test-grid-container:has(a:nth-child(5)) a:nth-child(3) {
    grid-area: 1 / 2 / 3 / 3;
}
.test-grid-container:has(a:nth-child(5)) a:nth-child(4) {
    grid-area: 3 / 2 / 5 / 3;
}
.test-grid-container:has(a:nth-child(5)) a:nth-child(5) {
    grid-area: 5 / 2 / 7 / 3;
}

.test-overlay-class {
    font-size: 50px;
}

/* ------------------------------------------------------------------------------------- */
/* * Media Queries                                                                       */
/* ------------------------------------------------------------------------------------- */

/* Tablets */
@media (max-width: 991px) {
    .test-grid-container {
        grid-template-rows: repeat(6, 120px);
    }
    
    .test-grid-container:has(a:nth-child(1)):not(:has(a:nth-child(2))) {
        grid-template-rows: repeat(4, 120px);
    }
    
    .test-grid-class-more p {
        font-size: 64px;
    }
    
    .test-overlay-class {
        font-size: 40px;
    }
}

/* Tablettes en portrait et mobiles en paysage */
@media (max-width: 767px) {
    .test-grid-container {
        padding: 3px;
        grid-template-rows: repeat(6, 100px);
    }
    
    .test-grid-container:has(a:nth-child(1)):not(:has(a:nth-child(2))) {
        grid-template-rows: repeat(3, 120px);
    }
    
    .test-grid-class,
    .test-grid-class-more {
        padding: 3px;
    }
    
    .test-grid-class-more p {
        font-size: 48px;
        top: 3px;
        right: 3px;
        bottom: -3px;
        left: 3px;
    }
    
    .test-overlay-class {
        font-size: 30px;
    }
    
    /* 1 photo sur tablette */
    .test-grid-container:has(a:nth-child(1)):not(:has(a:nth-child(2))) a:first-child {
        grid-area: 1 / 1 / 4 / 3;
    }
    
    /* 3 photos sur tablette */
    .test-grid-container:has(a:nth-child(3)):not(:has(a:nth-child(4))) a:nth-child(1) {
        grid-area: 1 / 1 / 5 / 2;
    }
    .test-grid-container:has(a:nth-child(3)):not(:has(a:nth-child(4))) a:nth-child(2) {
        grid-area: 1 / 2 / 3 / 3;
    }
    .test-grid-container:has(a:nth-child(3)):not(:has(a:nth-child(4))) a:nth-child(3) {
        grid-area: 3 / 2 / 5 / 3;
    }
}

/* Mobile en portrait */
@media (max-width: 500px) {
    .test-grid-container {
        padding: 2px;
        grid-template-columns: 100%;
        grid-template-rows: auto !important;
        gap: 2px;
    }
    
    .test-grid-class,
    .test-grid-class-more {
        padding: 0;
    }
    
    .test-grid-class img,
    .test-grid-class-more img {
        border-radius: 6px;
        height: auto;
    }
    
    .test-grid-class-more p {
        font-size: 36px;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: 6px;
    }
    
    .test-overlay-class {
        font-size: 24px;
    }
    
    /* 1 photo - carré */
    .test-grid-container:has(a:nth-child(1)):not(:has(a:nth-child(2))) a img {
        aspect-ratio: 1/1;
        object-fit: cover;
        max-height: 400px;
        min-height: 0;
    }
    
    /* 2+ photos - 4/3 */
    .test-grid-container:has(a:nth-child(2)) a img {
        aspect-ratio: 4/3;
        min-height: 0;
    }
    
    /* Reset toutes les grid areas */
    .test-grid-container:has(a:nth-child(1)):not(:has(a:nth-child(2))) a:first-child,
    .test-grid-container:has(a:nth-child(2)):not(:has(a:nth-child(3))) a:nth-child(1),
    .test-grid-container:has(a:nth-child(2)):not(:has(a:nth-child(3))) a:nth-child(2),
    .test-grid-container:has(a:nth-child(3)):not(:has(a:nth-child(4))) a:nth-child(1),
    .test-grid-container:has(a:nth-child(3)):not(:has(a:nth-child(4))) a:nth-child(2),
    .test-grid-container:has(a:nth-child(3)):not(:has(a:nth-child(4))) a:nth-child(3),
    .test-grid-container:has(a:nth-child(4)):not(:has(a:nth-child(5))) a:nth-child(1),
    .test-grid-container:has(a:nth-child(4)):not(:has(a:nth-child(5))) a:nth-child(2),
    .test-grid-container:has(a:nth-child(4)):not(:has(a:nth-child(5))) a:nth-child(3),
    .test-grid-container:has(a:nth-child(4)):not(:has(a:nth-child(5))) a:nth-child(4),
    .test-grid-container:has(a:nth-child(5)) a:nth-child(1),
    .test-grid-container:has(a:nth-child(5)) a:nth-child(2),
    .test-grid-container:has(a:nth-child(5)) a:nth-child(3),
    .test-grid-container:has(a:nth-child(5)) a:nth-child(4),
    .test-grid-container:has(a:nth-child(5)) a:nth-child(5) {
        grid-area: auto;
    }
}