.gallery {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(5, 1fr);
        gap: 5px;
        max-width: 100%;
        margin: 0 auto;
        aspect-ratio: 1 / 1;
    }

    .gallery__item {
        overflow: hidden;
        background: #ccc9c2;
    }

    .gallery__item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
        transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .gallery__item:hover img {
        transform: scale(1.05);
    }


    .item-1 {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

    /* 1×1 */
    .item-2 {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }

    /* 1×1 */
    .item-3 {
        grid-column: 3 / 5;
        grid-row: 1 / 3;
    }

    /* 2×2 */
    .item-4 {
        grid-column: 5 / 6;
        grid-row: 1 / 2;
    }

    /* 1×1 */
    .item-5 {
        grid-column: 1 / 3;
        grid-row: 2 / 4;
    }

    /* 2×2 */
    .item-6 {
        grid-column: 5 / 6;
        grid-row: 2 / 3;
    }

    /* 1×1 */
    .item-7 {
        grid-column: 3 / 4;
        grid-row: 3 / 4;
    }

    /* 1×1 */
    .item-8 {
        grid-column: 4 / 5;
        grid-row: 3 / 4;
    }

    /* 1×1 */
    .item-9 {
        grid-column: 5 / 6;
        grid-row: 3 / 4;
    }

    /* 1×1 */
    .item-10 {
        grid-column: 1 / 2;
        grid-row: 4 / 5;
    }

    /* 2×2 */
    .item-11 {
        grid-column: 2 / 4;
        grid-row: 4 / 6;
    }

    /* 1×1 */
    .item-12 {
        grid-column: 4 / 5;
        grid-row: 4 / 5;
    }

    @media screen and (max-width: 600px) {
        .gallery {
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: none;
            /* el aspect-ratio de cada item define la altura */
            aspect-ratio: unset;
            gap: 3px;
        }

        /* Todos los items son cuadrados */
        .gallery__item {
            aspect-ratio: 1 / 1;
        }

        /* Fila 1 — tres pequeñas */
        .item-1 {
            grid-column: 1 / 2;
        }

        .item-2 {
            grid-column: 2 / 3;
        }

        .item-3 {
            grid-column: 3 / 4;
        }

        /* Fila 2 — grande: ocupa 3 cols → ancho 100% → cuadrado grande */
        .item-4 {
            grid-column: 1 / 4;
            grid-row: 2 /2;
        }

        /* Fila 3 — tres pequeñas */
        .item-5 {
            grid-column: 1 / 2;
            grid-row: 3 / 3;
        }

        .item-6 {
            grid-column: 2 / 3;
            grid-row: 3 / 3;
        }

        .item-7 {
            grid-column: 3 / 4;
            grid-row: 3 / 3;
        }

        /* Fila 4 — grande */
        .item-8 {
            grid-column: 1 / 4;
            grid-row: 4 / 4;
        }

        /* Fila 5 — tres pequeñas */
        .item-9 {
            grid-column: 1 / 2;
            grid-row: 5 / 5;
        }

        .item-10 {
            grid-column: 2 / 3;
            grid-row: 5 / 5;    
        }

        .item-11 {
            grid-column: 3 / 4; 
            grid-row: 5 / 5;
        }

        /* Fila 6 — grande */
        .item-12 {
            grid-column: 1 / 4;
            grid-row: 6 / 6;
        }

    }