.container-grid {
    /* Syntaxe corrigée pour container queries */
    container-type: inline-size;
    container-name: container-grid;

    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
    width: 100%;

    &>* {
        padding: 0;
    }

    &>[class*='col-'] {
        padding: 0;
        width: 100%;
        max-width: 100%;
    }

    /* Classes de base (mobile first) */
    .col-start-1 {
        grid-column-start: 1;
    }

    .col-start-2 {
        grid-column-start: 2;
    }

    .col-start-3 {
        grid-column-start: 3;
    }

    .col-start-4 {
        grid-column-start: 4;
    }

    .col-start-5 {
        grid-column-start: 5;
    }

    .col-start-6 {
        grid-column-start: 6;
    }

    .col-start-7 {
        grid-column-start: 7;
    }

    .col-start-8 {
        grid-column-start: 8;
    }

    .col-start-9 {
        grid-column-start: 9;
    }

    .col-start-10 {
        grid-column-start: 10;
    }

    .col-start-11 {
        grid-column-start: 11;
    }

    .col-start-12 {
        grid-column-start: 12;
    }

    .col-1 {
        grid-column-end: span 1;
    }

    .col-2 {
        grid-column-end: span 2;
    }

    .col-3 {
        grid-column-end: span 3;
    }

    .col-4 {
        grid-column-end: span 4;
    }

    .col-5 {
        grid-column-end: span 5;
    }

    .col-6 {
        grid-column-end: span 6;
    }

    .col-7 {
        grid-column-end: span 7;
    }

    .col-8 {
        grid-column-end: span 8;
    }

    .col-9 {
        grid-column-end: span 9;
    }

    .col-10 {
        grid-column-end: span 10;
    }

    .col-11 {
        grid-column-end: span 11;
    }

    .col-12 {
        grid-column-end: span 12;
    }



    /* Container queries pour tablet/desktop */
    @container container-grid (min-width: 768px) {
        .md-col-1 {
            grid-column-end: span 1;
        }

        .md-col-2 {
            grid-column-end: span 2;
        }

        .md-col-3 {
            grid-column-end: span 3;
        }

        .md-col-4 {
            grid-column-end: span 4;
        }

        .md-col-5 {
            grid-column-end: span 5;
        }

        .md-col-6 {
            grid-column-end: span 6;
            grid-column: span 6;
        }

        .md-col-7 {
            grid-column-end: span 7;
        }

        .md-col-8 {
            grid-column-end: span 8;
        }

        .md-col-9 {
            grid-column-end: span 9;
        }

        .md-col-10 {
            grid-column-end: span 10;
        }

        .md-col-11 {
            grid-column-end: span 11;
        }

        .md-col-12 {
            grid-column-end: span 12;
        }

        .md-col-start-1 {
            grid-column-start: 1;
        }

        .md-col-start-2 {
            grid-column-start: 2;
        }

        .md-col-start-3 {
            grid-column-start: 3;
        }

        .md-col-start-4 {
            grid-column-start: 4;
        }

        .md-col-start-5 {
            grid-column-start: 5;
        }

        .md-col-start-6 {
            grid-column-start: 6;
        }

        .md-col-start-7 {
            grid-column-start: 7;
        }

        .md-col-start-8 {
            grid-column-start: 8;
        }

        .md-col-start-9 {
            grid-column-start: 9;
        }

        .md-col-start-10 {
            grid-column-start: 10;
        }

        .md-col-start-11 {
            grid-column-start: 11;
        }

        .md-col-start-12 {
            grid-column-start: 12;
        }
    }

    @container container-grid (min-width: 1024px) {
        .lg-col-1 {
            grid-column-end: span 1;
        }

        .lg-col-2 {
            grid-column-end: span 2;
        }

        .lg-col-3 {
            grid-column-end: span 3;
        }

        .lg-col-4 {
            grid-column-end: span 4;
        }

        .lg-col-5 {
            grid-column-end: span 5;
        }

        .lg-col-6 {
            grid-column-end: span 6;
        }

        .lg-col-7 {
            grid-column-end: span 7;
        }

        .lg-col-8 {
            grid-column-end: span 8;
        }

        .lg-col-9 {
            grid-column-end: span 9;
        }

        .lg-col-10 {
            grid-column-end: span 10;
        }

        .lg-col-11 {
            grid-column-end: span 11;
        }

        .lg-col-12 {
            grid-column-end: span 12;
        }

        .lg-col-start-1 {
            grid-column-start: 1;
        }

        .lg-col-start-2 {
            grid-column-start: 2;
        }

        .lg-col-start-3 {
            grid-column-start: 3;
        }

        .lg-col-start-4 {
            grid-column-start: 4;
        }

        .lg-col-start-5 {
            grid-column-start: 5;
        }

        .lg-col-start-6 {
            grid-column-start: 6;
        }

        .lg-col-start-7 {
            grid-column-start: 7;
        }

        .lg-col-start-8 {
            grid-column-start: 8;
        }

        .lg-col-start-9 {
            grid-column-start: 9;
        }

        .lg-col-start-10 {
            grid-column-start: 10;
        }

        .lg-col-start-11 {
            grid-column-start: 11;
        }

        .lg-col-start-12 {
            grid-column-start: 12;
        }
    }
}