/* -------------
    SOMMAIRE
------------- */

/*
    @AUTHOR : Nicolas BOUDOT

    PROPRIÉTÉ : DISPLAY GRID
    Styles liés à la propriété display: grid;
*/

/*
    01 - XS
        Display
        Columns
            Grid template columns
            Grid column
            Grid column start
            Grid column end
        Rows
            Grid template rows
            Grid row
            Grid row start
            Grid row end
        Area
            Grid template area
            Grid area
    02 - SM
    03 - MD
    04 - LG
    05 - XL
    06 - XXL
*/

/*
  @infos : La dernière déclaration d'une suite de déclarations (ex: d-grid {}), est celle de Bootstrap V5
    afin de ne pas perdre les traces de nommage de celui-ci. Les autres sont des raccourcis
*/



/* -----------------
    01 - XS
        Display
----------------- */

.d-grid {
    display: grid;
}



/* -----------------
    01 - XS
        Columns
            Grid template columns
----------------- */

.gtc-1 {
    grid-template-columns: repeat(1, 1fr);
}

.gtc-2 {
    grid-template-columns: repeat(2, 1fr);
}

.gtc-3 {
    grid-template-columns: repeat(3, 1fr);
}

.gtc-4 {
    grid-template-columns: repeat(4, 1fr);
}

.gtc-5 {
    grid-template-columns: repeat(5, 1fr);
}

.gtc-6 {
    grid-template-columns: repeat(6, 1fr);
}

.gtc-7 {
    grid-template-columns: repeat(7, 1fr);
}

.gtc-8 {
    grid-template-columns: repeat(8, 1fr);
}

.gtc-9 {
    grid-template-columns: repeat(9, 1fr);
}

.gtc-10 {
    grid-template-columns: repeat(10, 1fr);
}

.gtc-11 {
    grid-template-columns: repeat(11, 1fr);
}

.gtc-12 {
    grid-template-columns: repeat(12, 1fr);
}



/* -----------------
    01 - XS
        Columns
            Grid column
----------------- */

.gc-1-2 {
    grid-column: 1 / 2;
}



/* -----------------
    01 - XS
        Columns
            Grid column start
----------------- */

.gcs-1 {
    grid-column-start: 1;
}

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

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

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

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

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

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

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

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

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

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

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



/* -----------------
    01 - XS
        Columns
            Grid column end
----------------- */

.gce-1 {
    grid-column-end: 1;
}

.gce-2 {
    grid-column-end: 2;
}

.gce-3 {
    grid-column-end: 3;
}

.gce-4 {
    grid-column-end: 4;
}

.gce-5 {
    grid-column-end: 5;
}

.gce-6 {
    grid-column-end: 6;
}

.gce-7 {
    grid-column-end: 7;
}

.gce-8 {
    grid-column-end: 8;
}

.gce-9 {
    grid-column-end: 9;
}

.gce-10 {
    grid-column-end: 10;
}

.gce-11 {
    grid-column-end: 11;
}

.gce-12 {
    grid-column-end: 12;
}



/* -----------------
    01 - XS
        Rows
            Grid template rows
----------------- */

.gtr-auto {
    grid-template-rows: auto;
}

.gtr-1 {
    grid-template-rows: repeat(1, 1fr);
}

.gtr-2 {
    grid-template-rows: repeat(2, 1fr);
}

.gtr-3 {
    grid-template-rows: repeat(3, 1fr);
}

.gtr-4 {
    grid-template-rows: repeat(4, 1fr);
}

.gtr-5 {
    grid-template-rows: repeat(5, 1fr);
}

.gtr-6 {
    grid-template-rows: repeat(6, 1fr);
}

.gtr-7 {
    grid-template-rows: repeat(7, 1fr);
}

.gtr-8 {
    grid-template-rows: repeat(8, 1fr);
}

.gtr-9 {
    grid-template-rows: repeat(9, 1fr);
}

.gtr-10 {
    grid-template-rows: repeat(10, 1fr);
}

.gtr-11 {
    grid-template-rows: repeat(11, 1fr);
}

.gtr-12 {
    grid-template-rows: repeat(12, 1fr);
}



/* -----------------
    01 - XS
        Rows
            Grid row
----------------- */

.gr-1-2 {
    grid-row: 1 / 2;
}



/* -----------------
    01 - XS
        Rows
            Grid row start
----------------- */

.grs-1 {
    grid-row-start: 1;
}

.grs-2 {
    grid-row-start: 2;
}

.grs-3 {
    grid-row-start: 3;
}

.grs-4 {
    grid-row-start: 4;
}

.grs-5 {
    grid-row-start: 5;
}

.grs-6 {
    grid-row-start: 6;
}

.grs-7 {
    grid-row-start: 7;
}

.grs-8 {
    grid-row-start: 8;
}

.grs-9 {
    grid-row-start: 9;
}

.grs-10 {
    grid-row-start: 10;
}

.grs-11 {
    grid-row-start: 11;
}

.grs-12 {
    grid-row-start: 12;
}



/* -----------------
    01 - XS
        Rows
            Grid row end
----------------- */

.gre-1 {
    grid-row-end: 1;
}

.gre-2 {
    grid-row-end: 2;
}

.gre-3 {
    grid-row-end: 3;
}

.gre-4 {
    grid-row-end: 4;
}

.gre-5 {
    grid-row-end: 5;
}

.gre-6 {
    grid-row-end: 6;
}

.gre-7 {
    grid-row-end: 7;
}

.gre-8 {
    grid-row-end: 8;
}

.gre-9 {
    grid-row-end: 9;
}

.gre-10 {
    grid-row-end: 10;
}

.gre-11 {
    grid-row-end: 11;
}

.gre-12 {
    grid-row-end: 12;
}



/* -----------------
    01 - XS
        Area
            Grid template area
----------------- */

.gta-ab-c {
    grid-template-areas:
        "a b"
        "c .";
}

.gta-ab-cb {
    grid-template-areas:
        "a b"
        "c b";
}



/* -----------------
    01 - XS
        Area
            Grid area
----------------- */

.ga-a {
    grid-area: a;
}

.ga-b {
    grid-area: b;
}

.ga-c {
    grid-area: c;
}

.ga-d {
    grid-area: d;
}



/* -----------------
    02 - SM
        Display
----------------- */

@media (min-width: 576px) {
    .d-sm-grid {
        display: grid;
    }
}



/* -----------------
    02 - SM
        Columns
            Grid template columns
----------------- */

@media (min-width: 576px) {
    .gtc-sm-1 {
        grid-template-columns: repeat(1, 1fr);
    }

    .gtc-sm-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .gtc-sm-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .gtc-sm-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .gtc-sm-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .gtc-sm-6 {
        grid-template-columns: repeat(6, 1fr);
    }

    .gtc-sm-7 {
        grid-template-columns: repeat(7, 1fr);
    }

    .gtc-sm-8 {
        grid-template-columns: repeat(8, 1fr);
    }

    .gtc-sm-9 {
        grid-template-columns: repeat(9, 1fr);
    }

    .gtc-sm-10 {
        grid-template-columns: repeat(10, 1fr);
    }

    .gtc-sm-11 {
        grid-template-columns: repeat(11, 1fr);
    }

    .gtc-sm-12 {
        grid-template-columns: repeat(12, 1fr);
    }
}



/* -----------------
    02 - SM
        Columns
            Grid column
----------------- */

@media (min-width: 576px) {
    .gc-sm-1-2 {
        grid-column: 1 / 2;
    }
}



/* -----------------
    02 - SM
        Columns
            Grid column start
----------------- */

@media (min-width: 576px) {
    .gcs-sm-1 {
        grid-column-start: 1;
    }

    .gcs-sm-2 {
        grid-column-start: 2;
    }

    .gcs-sm-3 {
        grid-column-start: 3;
    }

    .gcs-sm-4 {
        grid-column-start: 4;
    }

    .gcs-sm-5 {
        grid-column-start: 5;
    }

    .gcs-sm-6 {
        grid-column-start: 6;
    }

    .gcs-sm-7 {
        grid-column-start: 7;
    }

    .gcs-sm-8 {
        grid-column-start: 8;
    }

    .gcs-sm-9 {
        grid-column-start: 9;
    }

    .gcs-sm-10 {
        grid-column-start: 10;
    }

    .gcs-sm-11 {
        grid-column-start: 11;
    }

    .gcs-sm-12 {
        grid-column-start: 12;
    }
}



/* -----------------
    02 - SM
        Columns
            Grid column end
----------------- */

@media (min-width: 576px) {
    .gce-sm-1 {
        grid-column-end: 1;
    }

    .gce-sm-2 {
        grid-column-end: 2;
    }

    .gce-sm-3 {
        grid-column-end: 3;
    }

    .gce-sm-4 {
        grid-column-end: 4;
    }

    .gce-sm-5 {
        grid-column-end: 5;
    }

    .gce-sm-6 {
        grid-column-end: 6;
    }

    .gce-sm-7 {
        grid-column-end: 7;
    }

    .gce-sm-8 {
        grid-column-end: 8;
    }

    .gce-sm-9 {
        grid-column-end: 9;
    }

    .gce-sm-10 {
        grid-column-end: 10;
    }

    .gce-sm-11 {
        grid-column-end: 11;
    }

    .gce-sm-12 {
        grid-column-end: 12;
    }
}



/* -----------------
    02 - SM
        Rows
            Grid template rows
----------------- */

@media (min-width: 576px) {
    .gtr-sm-auto {
        grid-template-rows: auto;
    }

    .gtr-sm-1 {
        grid-template-rows: repeat(1, 1fr);
    }

    .gtr-sm-2 {
        grid-template-rows: repeat(2, 1fr);
    }

    .gtr-sm-3 {
        grid-template-rows: repeat(3, 1fr);
    }

    .gtr-sm-4 {
        grid-template-rows: repeat(4, 1fr);
    }

    .gtr-sm-5 {
        grid-template-rows: repeat(5, 1fr);
    }

    .gtr-sm-6 {
        grid-template-rows: repeat(6, 1fr);
    }

    .gtr-sm-7 {
        grid-template-rows: repeat(7, 1fr);
    }

    .gtr-sm-8 {
        grid-template-rows: repeat(8, 1fr);
    }

    .gtr-sm-9 {
        grid-template-rows: repeat(9, 1fr);
    }

    .gtr-sm-10 {
        grid-template-rows: repeat(10, 1fr);
    }

    .gtr-sm-11 {
        grid-template-rows: repeat(11, 1fr);
    }

    .gtr-sm-12 {
        grid-template-rows: repeat(12, 1fr);
    }
}



/* -----------------
    02 - SM
        Rows
            Grid row
----------------- */

@media (min-width: 576px) {
    .gr-sm-1-2 {
        grid-row: 1 / 2;
    }
}



/* -----------------
    02 - SM
        Rows
            Grid row start
----------------- */

@media (min-width: 576px) {
    .grs-sm-1 {
        grid-row-start: 1;
    }

    .grs-sm-2 {
        grid-row-start: 2;
    }

    .grs-sm-3 {
        grid-row-start: 3;
    }

    .grs-sm-4 {
        grid-row-start: 4;
    }

    .grs-sm-5 {
        grid-row-start: 5;
    }

    .grs-sm-6 {
        grid-row-start: 6;
    }

    .grs-sm-7 {
        grid-row-start: 7;
    }

    .grs-sm-8 {
        grid-row-start: 8;
    }

    .grs-sm-9 {
        grid-row-start: 9;
    }

    .grs-sm-10 {
        grid-row-start: 10;
    }

    .grs-sm-11 {
        grid-row-start: 11;
    }

    .grs-sm-12 {
        grid-row-start: 12;
    }
}



/* -----------------
    02 - SM
        Rows
            Grid row end
----------------- */

@media (min-width: 576px) {
    .gre-sm-1 {
        grid-row-end: 1;
    }

    .gre-sm-2 {
        grid-row-end: 2;
    }

    .gre-sm-3 {
        grid-row-end: 3;
    }

    .gre-sm-4 {
        grid-row-end: 4;
    }

    .gre-sm-5 {
        grid-row-end: 5;
    }

    .gre-sm-6 {
        grid-row-end: 6;
    }

    .gre-sm-7 {
        grid-row-end: 7;
    }

    .gre-sm-8 {
        grid-row-end: 8;
    }

    .gre-sm-9 {
        grid-row-end: 9;
    }

    .gre-sm-10 {
        grid-row-end: 10;
    }

    .gre-sm-11 {
        grid-row-end: 11;
    }

    .gre-sm-12 {
        grid-row-end: 12;
    }
}



/* -----------------
    02 - SM
        Area
            Grid template area
----------------- */

@media (min-width: 576px) {
    .gta-sm-ab-c {
        grid-template-areas:
            "a b"
            "c .";
    }

    .gta-sm-ab-cb {
        grid-template-areas:
            "a b"
            "c b";
    }
}



/* -----------------
    02 - SM
        Area
            Grid area
----------------- */

@media (min-width: 576px) {
    .ga-sm-a {
        grid-area: a;
    }

    .ga-sm-b {
        grid-area: b;
    }

    .ga-sm-c {
        grid-area: c;
    }

    .ga-sm-d {
        grid-area: d;
    }
}



/* -----------------
    03 - MD
        Display
----------------- */

@media (min-width: 768px) {
    .d-md-grid {
        display: grid;
    }
}



/* -----------------
    03 - MD
        Columns
            Grid template columns
----------------- */

@media (min-width: 768px) {
    .gtc-md-1 {
        grid-template-columns: repeat(1, 1fr);
    }

    .gtc-md-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .gtc-md-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .gtc-md-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .gtc-md-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .gtc-md-6 {
        grid-template-columns: repeat(6, 1fr);
    }

    .gtc-md-7 {
        grid-template-columns: repeat(7, 1fr);
    }

    .gtc-md-8 {
        grid-template-columns: repeat(8, 1fr);
    }

    .gtc-md-9 {
        grid-template-columns: repeat(9, 1fr);
    }

    .gtc-md-10 {
        grid-template-columns: repeat(10, 1fr);
    }

    .gtc-md-11 {
        grid-template-columns: repeat(11, 1fr);
    }

    .gtc-md-12 {
        grid-template-columns: repeat(12, 1fr);
    }
}



/* -----------------
    03 - MD
        Columns
            Grid column
----------------- */

@media (min-width: 768px) {
    .gc-md-1-2 {
        grid-column: 1 / 2;
    }
}



/* -----------------
    03 - MD
        Columns
            Grid column start
----------------- */

@media (min-width: 768px) {
    .gcs-md-1 {
        grid-column-start: 1;
    }

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

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

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

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

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

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

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

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

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

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

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



/* -----------------
    03 - MD
        Columns
            Grid column end
----------------- */

@media (min-width: 768px) {
    .gce-md-1 {
        grid-column-end: 1;
    }

    .gce-md-2 {
        grid-column-end: 2;
    }

    .gce-md-3 {
        grid-column-end: 3;
    }

    .gce-md-4 {
        grid-column-end: 4;
    }

    .gce-md-5 {
        grid-column-end: 5;
    }

    .gce-md-6 {
        grid-column-end: 6;
    }

    .gce-md-7 {
        grid-column-end: 7;
    }

    .gce-md-8 {
        grid-column-end: 8;
    }

    .gce-md-9 {
        grid-column-end: 9;
    }

    .gce-md-10 {
        grid-column-end: 10;
    }

    .gce-md-11 {
        grid-column-end: 11;
    }

    .gce-md-12 {
        grid-column-end: 12;
    }
}



/* -----------------
    03 - MD
        Rows
            Grid template rows
----------------- */

@media (min-width: 768px) {
    .gtr-md-auto {
        grid-template-rows: auto;
    }

    .gtr-md-1 {
        grid-template-rows: repeat(1, 1fr);
    }

    .gtr-md-2 {
        grid-template-rows: repeat(2, 1fr);
    }

    .gtr-md-3 {
        grid-template-rows: repeat(3, 1fr);
    }

    .gtr-md-4 {
        grid-template-rows: repeat(4, 1fr);
    }

    .gtr-md-5 {
        grid-template-rows: repeat(5, 1fr);
    }

    .gtr-md-6 {
        grid-template-rows: repeat(6, 1fr);
    }

    .gtr-md-7 {
        grid-template-rows: repeat(7, 1fr);
    }

    .gtr-md-8 {
        grid-template-rows: repeat(8, 1fr);
    }

    .gtr-md-9 {
        grid-template-rows: repeat(9, 1fr);
    }

    .gtr-md-10 {
        grid-template-rows: repeat(10, 1fr);
    }

    .gtr-md-11 {
        grid-template-rows: repeat(11, 1fr);
    }

    .gtr-md-12 {
        grid-template-rows: repeat(12, 1fr);
    }
}



/* -----------------
    03 - MD
        Rows
            Grid row
----------------- */

@media (min-width: 768px) {
    .gr-md-1-2 {
        grid-row: 1 / 2;
    }
}



/* -----------------
    03 - MD
        Rows
            Grid row start
----------------- */

@media (min-width: 768px) {
    .grs-md-1 {
        grid-row-start: 1;
    }

    .grs-md-2 {
        grid-row-start: 2;
    }

    .grs-md-3 {
        grid-row-start: 3;
    }

    .grs-md-4 {
        grid-row-start: 4;
    }

    .grs-md-5 {
        grid-row-start: 5;
    }

    .grs-md-6 {
        grid-row-start: 6;
    }

    .grs-md-7 {
        grid-row-start: 7;
    }

    .grs-md-8 {
        grid-row-start: 8;
    }

    .grs-md-9 {
        grid-row-start: 9;
    }

    .grs-md-10 {
        grid-row-start: 10;
    }

    .grs-md-11 {
        grid-row-start: 11;
    }

    .grs-md-12 {
        grid-row-start: 12;
    }
}



/* -----------------
    03 - MD
        Rows
            Grid row end
----------------- */

@media (min-width: 768px) {
    .gre-md-1 {
        grid-row-end: 1;
    }

    .gre-md-2 {
        grid-row-end: 2;
    }

    .gre-md-3 {
        grid-row-end: 3;
    }

    .gre-md-4 {
        grid-row-end: 4;
    }

    .gre-md-5 {
        grid-row-end: 5;
    }

    .gre-md-6 {
        grid-row-end: 6;
    }

    .gre-md-7 {
        grid-row-end: 7;
    }

    .gre-md-8 {
        grid-row-end: 8;
    }

    .gre-md-9 {
        grid-row-end: 9;
    }

    .gre-md-10 {
        grid-row-end: 10;
    }

    .gre-md-11 {
        grid-row-end: 11;
    }

    .gre-md-12 {
        grid-row-end: 12;
    }
}



/* -----------------
    03 - MD
        Area
            Grid template area
----------------- */

@media (min-width: 768px) {
    .gta-md-ab-c {
        grid-template-areas:
            "a b"
            "c .";
    }

    .gta-md-ab-cb {
        grid-template-areas:
            "a b"
            "c b";
    }
}



/* -----------------
    03 - MD
        Area
            Grid area
----------------- */

@media (min-width: 768px) {
    .ga-md-a {
        grid-area: a;
    }

    .ga-md-b {
        grid-area: b;
    }

    .ga-md-c {
        grid-area: c;
    }

    .ga-md-d {
        grid-area: d;
    }
}



/* -----------------
    04 - LG
        Display
----------------- */

@media (min-width: 992px) {
    .d-lg-grid {
        display: grid;
    }
}



/* -----------------
    04 - LG
        Columns
            Grid template columns
----------------- */

@media (min-width: 992px) {
    .gtc-lg-1 {
        grid-template-columns: repeat(1, 1fr);
    }

    .gtc-lg-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .gtc-lg-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .gtc-lg-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .gtc-lg-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .gtc-lg-6 {
        grid-template-columns: repeat(6, 1fr);
    }

    .gtc-lg-7 {
        grid-template-columns: repeat(7, 1fr);
    }

    .gtc-lg-8 {
        grid-template-columns: repeat(8, 1fr);
    }

    .gtc-lg-9 {
        grid-template-columns: repeat(9, 1fr);
    }

    .gtc-lg-10 {
        grid-template-columns: repeat(10, 1fr);
    }

    .gtc-lg-11 {
        grid-template-columns: repeat(11, 1fr);
    }

    .gtc-lg-12 {
        grid-template-columns: repeat(12, 1fr);
    }
}



/* -----------------
    04 - LG
        Columns
            Grid column
----------------- */

@media (min-width: 992px) {
    .gc-lg-1-2 {
        grid-column: 1 / 2;
    }
}



/* -----------------
    04 - LG
        Columns
            Grid column start
----------------- */

@media (min-width: 992px) {
    .gcs-lg-1 {
        grid-column-start: 1;
    }

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

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

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

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

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

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

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

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

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

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

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



/* -----------------
    04 - LG
        Columns
            Grid column end
----------------- */

@media (min-width: 992px) {
    .gce-lg-1 {
        grid-column-end: 1;
    }

    .gce-lg-2 {
        grid-column-end: 2;
    }

    .gce-lg-3 {
        grid-column-end: 3;
    }

    .gce-lg-4 {
        grid-column-end: 4;
    }

    .gce-lg-5 {
        grid-column-end: 5;
    }

    .gce-lg-6 {
        grid-column-end: 6;
    }

    .gce-lg-7 {
        grid-column-end: 7;
    }

    .gce-lg-8 {
        grid-column-end: 8;
    }

    .gce-lg-9 {
        grid-column-end: 9;
    }

    .gce-lg-10 {
        grid-column-end: 10;
    }

    .gce-lg-11 {
        grid-column-end: 11;
    }

    .gce-lg-12 {
        grid-column-end: 12;
    }
}



/* -----------------
    04 - LG
        Rows
            Grid template rows
----------------- */

@media (min-width: 992px) {
    .gtr-lg-auto {
        grid-template-rows: auto;
    }

    .gtr-lg-1 {
        grid-template-rows: repeat(1, 1fr);
    }

    .gtr-lg-2 {
        grid-template-rows: repeat(2, 1fr);
    }

    .gtr-lg-3 {
        grid-template-rows: repeat(3, 1fr);
    }

    .gtr-lg-4 {
        grid-template-rows: repeat(4, 1fr);
    }

    .gtr-lg-5 {
        grid-template-rows: repeat(5, 1fr);
    }

    .gtr-lg-6 {
        grid-template-rows: repeat(6, 1fr);
    }

    .gtr-lg-7 {
        grid-template-rows: repeat(7, 1fr);
    }

    .gtr-lg-8 {
        grid-template-rows: repeat(8, 1fr);
    }

    .gtr-lg-9 {
        grid-template-rows: repeat(9, 1fr);
    }

    .gtr-lg-10 {
        grid-template-rows: repeat(10, 1fr);
    }

    .gtr-lg-11 {
        grid-template-rows: repeat(11, 1fr);
    }

    .gtr-lg-12 {
        grid-template-rows: repeat(12, 1fr);
    }
}



/* -----------------
    04 - LG
        Rows
            Grid row
----------------- */

@media (min-width: 992px) {
    .gr-lg-1-2 {
        grid-row: 1 / 2;
    }
}



/* -----------------
    04 - LG
        Rows
            Grid row start
----------------- */

@media (min-width: 992px) {
    .grs-lg-1 {
        grid-row-start: 1;
    }

    .grs-lg-2 {
        grid-row-start: 2;
    }

    .grs-lg-3 {
        grid-row-start: 3;
    }

    .grs-lg-4 {
        grid-row-start: 4;
    }

    .grs-lg-5 {
        grid-row-start: 5;
    }

    .grs-lg-6 {
        grid-row-start: 6;
    }

    .grs-lg-7 {
        grid-row-start: 7;
    }

    .grs-lg-8 {
        grid-row-start: 8;
    }

    .grs-lg-9 {
        grid-row-start: 9;
    }

    .grs-lg-10 {
        grid-row-start: 10;
    }

    .grs-lg-11 {
        grid-row-start: 11;
    }

    .grs-lg-12 {
        grid-row-start: 12;
    }
}



/* -----------------
    04 - LG
        Rows
            Grid row end
----------------- */

@media (min-width: 992px) {
    .gre-lg-1 {
        grid-row-end: 1;
    }

    .gre-lg-2 {
        grid-row-end: 2;
    }

    .gre-lg-3 {
        grid-row-end: 3;
    }

    .gre-lg-4 {
        grid-row-end: 4;
    }

    .gre-lg-5 {
        grid-row-end: 5;
    }

    .gre-lg-6 {
        grid-row-end: 6;
    }

    .gre-lg-7 {
        grid-row-end: 7;
    }

    .gre-lg-8 {
        grid-row-end: 8;
    }

    .gre-lg-9 {
        grid-row-end: 9;
    }

    .gre-lg-10 {
        grid-row-end: 10;
    }

    .gre-lg-11 {
        grid-row-end: 11;
    }

    .gre-lg-12 {
        grid-row-end: 12;
    }
}



/* -----------------
    04 - LG
        Area
            Grid template area
----------------- */

@media (min-width: 992px) {
    .gta-lg-ab-c {
        grid-template-areas:
            "a b"
            "c .";
    }

    .gta-lg-ab-cb {
        grid-template-areas:
            "a b"
            "c b";
    }
}



/* -----------------
    04 - LG
        Area
            Grid area
----------------- */

@media (min-width: 992px) {
    .ga-lg-a {
        grid-area: a;
    }

    .ga-lg-b {
        grid-area: b;
    }

    .ga-lg-c {
        grid-area: c;
    }

    .ga-lg-d {
        grid-area: d;
    }
}



/* -----------------
    05 - XL
        Display
----------------- */

@media (min-width: 1200px) {
    .d-xl-grid {
        display: grid;
    }
}



/* -----------------
    05 - XL
        Columns
            Grid template columns
----------------- */

@media (min-width: 1200px) {
    .gtc-xl-1 {
        grid-template-columns: repeat(1, 1fr);
    }

    .gtc-xl-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .gtc-xl-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .gtc-xl-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .gtc-xl-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .gtc-xl-6 {
        grid-template-columns: repeat(6, 1fr);
    }

    .gtc-xl-7 {
        grid-template-columns: repeat(7, 1fr);
    }

    .gtc-xl-8 {
        grid-template-columns: repeat(8, 1fr);
    }

    .gtc-xl-9 {
        grid-template-columns: repeat(9, 1fr);
    }

    .gtc-xl-10 {
        grid-template-columns: repeat(10, 1fr);
    }

    .gtc-xl-11 {
        grid-template-columns: repeat(11, 1fr);
    }

    .gtc-xl-12 {
        grid-template-columns: repeat(12, 1fr);
    }
}



/* -----------------
    05 - XL
        Columns
            Grid column
----------------- */

@media (min-width: 1200px) {
    .gc-xl-1-2 {
        grid-column: 1 / 2;
    }
}



/* -----------------
    05 - XL
        Columns
            Grid column start
----------------- */

@media (min-width: 1200px) {
    .gcs-xl-1 {
        grid-column-start: 1;
    }

    .gcs-xl-2 {
        grid-column-start: 2;
    }

    .gcs-xl-3 {
        grid-column-start: 3;
    }

    .gcs-xl-4 {
        grid-column-start: 4;
    }

    .gcs-xl-5 {
        grid-column-start: 5;
    }

    .gcs-xl-6 {
        grid-column-start: 6;
    }

    .gcs-xl-7 {
        grid-column-start: 7;
    }

    .gcs-xl-8 {
        grid-column-start: 8;
    }

    .gcs-xl-9 {
        grid-column-start: 9;
    }

    .gcs-xl-10 {
        grid-column-start: 10;
    }

    .gcs-xl-11 {
        grid-column-start: 11;
    }

    .gcs-xl-12 {
        grid-column-start: 12;
    }
}



/* -----------------
    05 - XL
        Columns
            Grid column end
----------------- */

@media (min-width: 1200px) {
    .gce-xl-1 {
        grid-column-end: 1;
    }

    .gce-xl-2 {
        grid-column-end: 2;
    }

    .gce-xl-3 {
        grid-column-end: 3;
    }

    .gce-xl-4 {
        grid-column-end: 4;
    }

    .gce-xl-5 {
        grid-column-end: 5;
    }

    .gce-xl-6 {
        grid-column-end: 6;
    }

    .gce-xl-7 {
        grid-column-end: 7;
    }

    .gce-xl-8 {
        grid-column-end: 8;
    }

    .gce-xl-9 {
        grid-column-end: 9;
    }

    .gce-xl-10 {
        grid-column-end: 10;
    }

    .gce-xl-11 {
        grid-column-end: 11;
    }

    .gce-xl-12 {
        grid-column-end: 12;
    }
}



/* -----------------
    05 - XL
        Rows
            Grid template rows
----------------- */

@media (min-width: 1200px) {
    .gtr-xl-auto {
        grid-template-rows: auto;
    }

    .gtr-xl-1 {
        grid-template-rows: repeat(1, 1fr);
    }

    .gtr-xl-2 {
        grid-template-rows: repeat(2, 1fr);
    }

    .gtr-xl-3 {
        grid-template-rows: repeat(3, 1fr);
    }

    .gtr-xl-4 {
        grid-template-rows: repeat(4, 1fr);
    }

    .gtr-xl-5 {
        grid-template-rows: repeat(5, 1fr);
    }

    .gtr-xl-6 {
        grid-template-rows: repeat(6, 1fr);
    }

    .gtr-xl-7 {
        grid-template-rows: repeat(7, 1fr);
    }

    .gtr-xl-8 {
        grid-template-rows: repeat(8, 1fr);
    }

    .gtr-xl-9 {
        grid-template-rows: repeat(9, 1fr);
    }

    .gtr-xl-10 {
        grid-template-rows: repeat(10, 1fr);
    }

    .gtr-xl-11 {
        grid-template-rows: repeat(11, 1fr);
    }

    .gtr-xl-12 {
        grid-template-rows: repeat(12, 1fr);
    }
}



/* -----------------
    05 - XL
        Rows
            Grid row
----------------- */

@media (min-width: 1200px) {
    .gr-xl-1-2 {
        grid-row: 1 / 2;
    }
}



/* -----------------
    05 - XL
        Rows
            Grid row start
----------------- */

@media (min-width: 1200px) {
    .grs-xl-1 {
        grid-row-start: 1;
    }

    .grs-xl-2 {
        grid-row-start: 2;
    }

    .grs-xl-3 {
        grid-row-start: 3;
    }

    .grs-xl-4 {
        grid-row-start: 4;
    }

    .grs-xl-5 {
        grid-row-start: 5;
    }

    .grs-xl-6 {
        grid-row-start: 6;
    }

    .grs-xl-7 {
        grid-row-start: 7;
    }

    .grs-xl-8 {
        grid-row-start: 8;
    }

    .grs-xl-9 {
        grid-row-start: 9;
    }

    .grs-xl-10 {
        grid-row-start: 10;
    }

    .grs-xl-11 {
        grid-row-start: 11;
    }

    .grs-xl-12 {
        grid-row-start: 12;
    }
}



/* -----------------
    05 - XL
        Rows
            Grid row end
----------------- */

@media (min-width: 1200px) {
    .gre-xl-1 {
        grid-row-end: 1;
    }

    .gre-xl-2 {
        grid-row-end: 2;
    }

    .gre-xl-3 {
        grid-row-end: 3;
    }

    .gre-xl-4 {
        grid-row-end: 4;
    }

    .gre-xl-5 {
        grid-row-end: 5;
    }

    .gre-xl-6 {
        grid-row-end: 6;
    }

    .gre-xl-7 {
        grid-row-end: 7;
    }

    .gre-xl-8 {
        grid-row-end: 8;
    }

    .gre-xl-9 {
        grid-row-end: 9;
    }

    .gre-xl-10 {
        grid-row-end: 10;
    }

    .gre-xl-11 {
        grid-row-end: 11;
    }

    .gre-xl-12 {
        grid-row-end: 12;
    }
}



/* -----------------
    05 - XL
        Area
            Grid template area
----------------- */

@media (min-width: 1200px) {
    .gta-xl-ab-c {
        grid-template-areas:
            "a b"
            "c .";
    }

    .gta-xl-ab-cb {
        grid-template-areas:
            "a b"
            "c b";
    }
}



/* -----------------
    05 - XL
        Area
            Grid area
----------------- */

@media (min-width: 1200px) {
    .ga-xl-a {
        grid-area: a;
    }

    .ga-xl-b {
        grid-area: b;
    }

    .ga-xl-c {
        grid-area: c;
    }

    .ga-xl-d {
        grid-area: d;
    }
}



/* -----------------
    06 - XXL
        Display
----------------- */

@media (min-width: 1400px) {
    .d-xxl-grid {
        display: grid;
    }
}



/* -----------------
    06 - XXL
        Columns
            Grid template columns
----------------- */

@media (min-width: 1400px) {
    .gtc-xxl-1 {
        grid-template-columns: repeat(1, 1fr);
    }

    .gtc-xxl-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .gtc-xxl-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .gtc-xxl-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .gtc-xxl-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .gtc-xxl-6 {
        grid-template-columns: repeat(6, 1fr);
    }

    .gtc-xxl-7 {
        grid-template-columns: repeat(7, 1fr);
    }

    .gtc-xxl-8 {
        grid-template-columns: repeat(8, 1fr);
    }

    .gtc-xxl-9 {
        grid-template-columns: repeat(9, 1fr);
    }

    .gtc-xxl-10 {
        grid-template-columns: repeat(10, 1fr);
    }

    .gtc-xxl-11 {
        grid-template-columns: repeat(11, 1fr);
    }

    .gtc-xxl-12 {
        grid-template-columns: repeat(12, 1fr);
    }
}



/* -----------------
    06 - XXL
        Columns
            Grid column
----------------- */

@media (min-width: 1400px) {
    .gc-xxl-1-2 {
        grid-column: 1 / 2;
    }
}



/* -----------------
    06 - XXL
        Columns
            Grid column start
----------------- */

@media (min-width: 1400px) {
    .gcs-xxl-1 {
        grid-column-start: 1;
    }

    .gcs-xxl-2 {
        grid-column-start: 2;
    }

    .gcs-xxl-3 {
        grid-column-start: 3;
    }

    .gcs-xxl-4 {
        grid-column-start: 4;
    }

    .gcs-xxl-5 {
        grid-column-start: 5;
    }

    .gcs-xxl-6 {
        grid-column-start: 6;
    }

    .gcs-xxl-7 {
        grid-column-start: 7;
    }

    .gcs-xxl-8 {
        grid-column-start: 8;
    }

    .gcs-xxl-9 {
        grid-column-start: 9;
    }

    .gcs-xxl-10 {
        grid-column-start: 10;
    }

    .gcs-xxl-11 {
        grid-column-start: 11;
    }

    .gcs-xxl-12 {
        grid-column-start: 12;
    }
}



/* -----------------
    06 - XXL
        Columns
            Grid column end
----------------- */

@media (min-width: 1400px) {
    .gce-xxl-1 {
        grid-column-end: 1;
    }

    .gce-xxl-2 {
        grid-column-end: 2;
    }

    .gce-xxl-3 {
        grid-column-end: 3;
    }

    .gce-xxl-4 {
        grid-column-end: 4;
    }

    .gce-xxl-5 {
        grid-column-end: 5;
    }

    .gce-xxl-6 {
        grid-column-end: 6;
    }

    .gce-xxl-7 {
        grid-column-end: 7;
    }

    .gce-xxl-8 {
        grid-column-end: 8;
    }

    .gce-xxl-9 {
        grid-column-end: 9;
    }

    .gce-xxl-10 {
        grid-column-end: 10;
    }

    .gce-xxl-11 {
        grid-column-end: 11;
    }

    .gce-xxl-12 {
        grid-column-end: 12;
    }
}



/* -----------------
    06 - XXL
        Rows
            Grid template rows
----------------- */

@media (min-width: 1400px) {
    .gtr-xxl-auto {
        grid-template-rows: auto;
    }

    .gtr-xxl-1 {
        grid-template-rows: repeat(1, 1fr);
    }

    .gtr-xxl-2 {
        grid-template-rows: repeat(2, 1fr);
    }

    .gtr-xxl-3 {
        grid-template-rows: repeat(3, 1fr);
    }

    .gtr-xxl-4 {
        grid-template-rows: repeat(4, 1fr);
    }

    .gtr-xxl-5 {
        grid-template-rows: repeat(5, 1fr);
    }

    .gtr-xxl-6 {
        grid-template-rows: repeat(6, 1fr);
    }

    .gtr-xxl-7 {
        grid-template-rows: repeat(7, 1fr);
    }

    .gtr-xxl-8 {
        grid-template-rows: repeat(8, 1fr);
    }

    .gtr-xxl-9 {
        grid-template-rows: repeat(9, 1fr);
    }

    .gtr-xxl-10 {
        grid-template-rows: repeat(10, 1fr);
    }

    .gtr-xxl-11 {
        grid-template-rows: repeat(11, 1fr);
    }

    .gtr-xxl-12 {
        grid-template-rows: repeat(12, 1fr);
    }
}



/* -----------------
    06 - XXL
        Rows
            Grid row
----------------- */

@media (min-width: 1400px) {
    .gr-xxl-1-2 {
        grid-row: 1 / 2;
    }
}



/* -----------------
    06 - XXL
        Rows
            Grid row start
----------------- */

@media (min-width: 1400px) {
    .grs-xxl-1 {
        grid-row-start: 1;
    }

    .grs-xxl-2 {
        grid-row-start: 2;
    }

    .grs-xxl-3 {
        grid-row-start: 3;
    }

    .grs-xxl-4 {
        grid-row-start: 4;
    }

    .grs-xxl-5 {
        grid-row-start: 5;
    }

    .grs-xxl-6 {
        grid-row-start: 6;
    }

    .grs-xxl-7 {
        grid-row-start: 7;
    }

    .grs-xxl-8 {
        grid-row-start: 8;
    }

    .grs-xxl-9 {
        grid-row-start: 9;
    }

    .grs-xxl-10 {
        grid-row-start: 10;
    }

    .grs-xxl-11 {
        grid-row-start: 11;
    }

    .grs-xxl-12 {
        grid-row-start: 12;
    }
}



/* -----------------
    06 - XXL
        Rows
            Grid row end
----------------- */

@media (min-width: 1400px) {
    .gre-xxl-1 {
        grid-row-end: 1;
    }

    .gre-xxl-2 {
        grid-row-end: 2;
    }

    .gre-xxl-3 {
        grid-row-end: 3;
    }

    .gre-xxl-4 {
        grid-row-end: 4;
    }

    .gre-xxl-5 {
        grid-row-end: 5;
    }

    .gre-xxl-6 {
        grid-row-end: 6;
    }

    .gre-xxl-7 {
        grid-row-end: 7;
    }

    .gre-xxl-8 {
        grid-row-end: 8;
    }

    .gre-xxl-9 {
        grid-row-end: 9;
    }

    .gre-xxl-10 {
        grid-row-end: 10;
    }

    .gre-xxl-11 {
        grid-row-end: 11;
    }

    .gre-xxl-12 {
        grid-row-end: 12;
    }
}



/* -----------------
    06 - XXL
        Area
            Grid template area
----------------- */

@media (min-width: 1400px) {
    .gta-xxl-ab-c {
        grid-template-areas:
            "a b"
            "c .";
    }

    .gta-xxl-ab-cb {
        grid-template-areas:
            "a b"
            "c b";
    }
}



/* -----------------
    06 - XXL
        Area
            Grid area
----------------- */

@media (min-width: 1400px) {
    .ga-xxl-a {
        grid-area: a;
    }

    .ga-xxl-b {
        grid-area: b;
    }

    .ga-xxl-c {
        grid-area: c;
    }

    .ga-xxl-d {
        grid-area: d;
    }
}