/* ------------------------------------------------ */
/*   Grillade : système de micro-grille de KNACSS   */
/* ------------------------------------------------ */


.grid-vcenter {
    align-items: center;
}

.grid,
[class*=" grid-"], [class^=grid-]
{
    display: grid;
}

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

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

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

/* grid-template-columns initialisation */
.grid-1 {grid-template-columns: repeat(1, minmax(0, 1fr));}
.grid-2 {grid-template-columns: repeat(2, minmax(0, 1fr));}
.grid-3 {grid-template-columns: repeat(3, minmax(0, 1fr));}
.grid-4 {grid-template-columns: repeat(4, minmax(0, 1fr));}
.grid-5 {grid-template-columns: repeat(5, minmax(0, 1fr));}
.grid-6 {grid-template-columns: repeat(6, minmax(0, 1fr));}
.grid-7 {grid-template-columns: repeat(7, minmax(0, 1fr));}
.grid-8 {grid-template-columns: repeat(8, minmax(0, 1fr));}
.grid-9 {grid-template-columns: repeat(9, minmax(0, 1fr));}
.grid-10 {grid-template-columns: repeat(10, minmax(0, 1fr));}
.grid-11 {grid-template-columns: repeat(11, minmax(0, 1fr));}
.grid-12 {grid-template-columns: repeat(12, minmax(0, 1fr));}


.grid-row-4 {grid-template-rows: repeat(4, minmax(0, 1fr));}
.grid-row-5 {grid-template-rows: repeat(5, minmax(0, 1fr));}

/* grid-template-columns au sein des breakpoints */
@media (min-width: 576px) {
    .sm\:grid-1 {grid-template-columns: repeat(1, minmax(0, 1fr));}
    .sm\:grid-2 {grid-template-columns: repeat(2, minmax(0, 1fr));}
    .sm\:grid-3 {grid-template-columns: repeat(3, minmax(0, 1fr));}
    .sm\:grid-4 {grid-template-columns: repeat(4, minmax(0, 1fr));}
    .sm\:grid-5 {grid-template-columns: repeat(5, minmax(0, 1fr));}
    .sm\:grid-6 {grid-template-columns: repeat(6, minmax(0, 1fr));}
}

@media (min-width: 992px) {
    .md\:grid-1 {grid-template-columns: repeat(1, minmax(0, 1fr));}
    .md\:grid-2 {grid-template-columns: repeat(2, minmax(0, 1fr));}
    .md\:grid-3 {grid-template-columns: repeat(3, minmax(0, 1fr));}
    .md\:grid-4 {grid-template-columns: repeat(4, minmax(0, 1fr));}
    .md\:grid-5 {grid-template-columns: repeat(5, minmax(0, 1fr));}
    .md\:grid-6 {grid-template-columns: repeat(6, minmax(0, 1fr));}
}

@media (min-width: 1400px) {
    .lg\:grid-1 {grid-template-columns: repeat(1, minmax(0, 1fr));}
    .lg\:grid-2 {grid-template-columns: repeat(2, minmax(0, 1fr));}
    .lg\:grid-3 {grid-template-columns: repeat(3, minmax(0, 1fr));}
    .lg\:grid-4 {grid-template-columns: repeat(4, minmax(0, 1fr));}
    .lg\:grid-5 {grid-template-columns: repeat(5, minmax(0, 1fr));}
    .lg\:grid-6 {grid-template-columns: repeat(6, minmax(0, 1fr));}
}

/* gap initialisation */
.has-gutter {gap: 1rem;}
.has-gutter-l {gap: 2rem;}
.has-gutter-xl {gap: 4rem;}

.gap-0 {gap: 0;}
.gap-x-0 {column-gap: 0;}
.gap-y-0 {row-gap: 0;}

.gap-5 {gap: 0.313rem;}
.gap-x-5 {column-gap: 0.313rem;}
.gap-y-5 {row-gap: 0.313rem;}

.gap-10 {gap: 0.625rem;}
.gap-x-10 {column-gap: 0.625rem;}
.gap-y-10 {row-gap: 0.625rem;}

.gap-16 {gap: 1rem;}
.gap-x-16 {column-gap: 1rem;}
.gap-y-16 {row-gap: 1rem;}

.gap-20 {gap: 1.25rem;}
.gap-x-20 {column-gap: 1.25rem;}
.gap-y-20 {row-gap: 1.25rem;}

.gap-36 {gap: 2.25rem;}
.gap-x-36 {column-gap: 2.25rem;}
.gap-y-36 {row-gap: 2.25rem;}

/* gap au sein des breakpoints */
@media (min-width: 576px) {
    .sm\:gap-0 {gap: 0;}
    .sm\:gap-x-0 {column-gap: 0;}
    .sm\:gap-y-0 {row-gap: 0;}

    .sm\:gap-5 {gap: 0.313rem;}
    .sm\:gap-x-5 {column-gap: 0.313rem;}
    .sm\:gap-y-5 {row-gap: 0.313rem;}

    .sm\:gap-10 {gap: 0.625rem;}
    .sm\:gap-x-10 {column-gap: 0.625rem;}
    .sm\:gap-y-10 {row-gap: 0.625rem;}

    .sm\:gap-16 {gap: 1rem;}
    .sm\:gap-x-16 {column-gap: 1rem;}
    .sm\:gap-y-16 {row-gap: 1rem;}

    .sm\:gap-20 {gap: 1.25rem;}
    .sm\:gap-x-20 {column-gap: 1.25rem;}
    .sm\:gap-y-20 {row-gap: 1.25rem;}

    .sm\:gap-36 {gap: 2.25rem;}
    .sm\:gap-x-36 {column-gap: 2.25rem;}
    .sm\:gap-y-36 {row-gap: 2.25rem;}
}

@media (min-width: 992px) {
    .md\:gap-0 {gap: 0;}
    .md\:gap-x-0 {column-gap: 0;}
    .md\:gap-y-0 {row-gap: 0;}

    .md\:gap-5 {gap: 0.313rem;}
    .md\:gap-x-5 {column-gap: 0.313rem;}
    .md\:gap-y-5 {row-gap: 0.313rem;}

    .md\:gap-10 {gap: 0.625rem;}
    .md\:gap-x-10 {column-gap: 0.625rem;}
    .md\:gap-y-10 {row-gap: 0.625rem;}

    .md\:gap-16 {gap: 1rem;}
    .md\:gap-x-16 {column-gap: 1rem;}
    .md\:gap-y-16 {row-gap: 1rem;}

    .md\:gap-20 {gap: 1.25rem;}
    .md\:gap-x-20 {column-gap: 1.25rem;}
    .md\:gap-y-20 {row-gap: 1.25rem;}

    .md\:gap-36 {gap: 2.25rem;}
    .md\:gap-x-36 {column-gap: 2.25rem;}
    .md\:gap-y-36 {row-gap: 2.25rem;}
}

@media (min-width: 1400px) {
    .lg\:gap-0 {gap: 0;}
    .lg\:gap-x-0 {column-gap: 0;}
    .lg\:gap-y-0 {row-gap: 0;}

    .lg\:gap-5 {gap: 0.313rem;}
    .lg\:gap-x-5 {column-gap: 0.313rem;}
    .lg\:gap-y-5 {row-gap: 0.313rem;}

    .lg\:gap-10 {gap: 0.625rem;}
    .lg\:gap-x-10 {column-gap: 0.625rem;}
    .lg\:gap-y-10 {row-gap: 0.625rem;}

    .lg\:gap-16 {gap: 1rem;}
    .lg\:gap-x-16 {column-gap: 1rem;}
    .lg\:gap-y-16 {row-gap: 1rem;}

    .lg\:gap-20 {gap: 1.25rem;}
    .lg\:gap-x-20 {column-gap: 1.25rem;}
    .lg\:gap-y-20 {row-gap: 1.25rem;}

    .lg\:gap-36 {gap: 2.25rem;}
    .lg\:gap-x-36 {column-gap: 2.25rem;}
    .lg\:gap-y-36 {row-gap: 2.25rem;}
}

/* grid-items initialisation */
.col-start-1 {grid-column-start: 1;}
.col-end-1 {grid-column-end: 1;}
.col-span-1 {grid-column: span 1 / span 1;}
.row-start-1 {grid-row-start: 1;}
.row-end-1 {grid-row-end: 1;}
.row-span-1 {grid-row: span 1 / span 1;}

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

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

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

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

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

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

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

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

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

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

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

.col-span-full {grid-column: 1 / -1;}



/* grid-items au sein des breakpoints */
@media (min-width: 576px) {
    .sm\:col-start-1 {grid-column-start: 1;}
    .sm\:col-end-1 {grid-column-end: 1;}
    .sm\:col-span-1 {grid-column: span 1 / span 1;}
    .sm\:row-start-1 {grid-row-start: 1;}
    .sm\:row-end-1 {grid-row-end: 1;}
    .sm\:row-span-1 {grid-row: span 1 / span 1;}

    .sm\:col-start-2 {grid-column-start: 2;}
    .sm\:col-end-2 {grid-column-end: 2;}
    .sm\:col-span-2 {grid-column: span 2 / span 2;}
    .sm\:row-start-2 {grid-row-start: 2;}
    .sm\:row-end-2 {grid-row-end: 2;}
    .sm\:row-span-2 {grid-row: span 2 / span 2;}

    .sm\:col-start-3 {grid-column-start: 3;}
    .sm\:col-end-3 {grid-column-end: 3;}
    .sm\:col-span-3 {grid-column: span 3 / span 3;}
    .sm\:row-start-3 {grid-row-start: 3;}
    .sm\:row-end-3 {grid-row-end: 3;}
    .sm\:row-span-3 {grid-row: span 3 / span 3;}

    .sm\:col-start-4 {grid-column-start: 4;}
    .sm\:col-end-4 {grid-column-end: 4;}
    .sm\:col-span-4 {grid-column: span 4 / span 4;}
    .sm\:row-start-4 {grid-row-start: 4;}
    .sm\:row-end-4 {grid-row-end: 4;}
    .sm\:row-span-4 {grid-row: span 4 / span 4;}

    .sm\:col-start-5 {grid-column-start: 5;}
    .sm\:col-end-5 {grid-column-end: 5;}
    .sm\:col-span-5 {grid-column: span 5 / span 5;}
    .sm\:row-start-5 {grid-row-start: 5;}
    .sm\:row-end-5 {grid-row-end: 5;}
    .sm\:row-span-5 {grid-row: span 5 / span 5;}

    .sm\:col-start-6 {grid-column-start: 6;}
    .sm\:col-end-6 {grid-column-end: 6;}
    .sm\:col-span-6 {grid-column: span 6 / span 6;}
    .sm\:row-start-6 {grid-row-start: 6;}
    .sm\:row-end-6 {grid-row-end: 6;}
    .sm\:row-span-6 {grid-row: span 6 / span 6;}
}

@media (min-width: 992px) {
    .md\:col-start-1 {grid-column-start: 1;}
    .md\:col-end-1 {grid-column-end: 1;}
    .md\:col-span-1 {grid-column: span 1 / span 1;}
    .md\:row-start-1 {grid-row-start: 1;}
    .md\:row-end-1 {grid-row-end: 1;}
    .md\:row-span-1 {grid-row: span 1 / span 1;}

    .md\:col-start-2 {grid-column-start: 2;}
    .md\:col-end-2 {grid-column-end: 2;}
    .md\:col-span-2 {grid-column: span 2 / span 2;}
    .md\:row-start-2 {grid-row-start: 2;}
    .md\:row-end-2 {grid-row-end: 2;}
    .md\:row-span-2 {grid-row: span 2 / span 2;}

    .md\:col-start-3 {grid-column-start: 3;}
    .md\:col-end-3 {grid-column-end: 3;}
    .md\:col-span-3 {grid-column: span 3 / span 3;}
    .md\:row-start-3 {grid-row-start: 3;}
    .md\:row-end-3 {grid-row-end: 3;}
    .md\:row-span-3 {grid-row: span 3 / span 3;}

    .md\:col-start-4 {grid-column-start: 4;}
    .md\:col-end-4 {grid-column-end: 4;}
    .md\:col-span-4 {grid-column: span 4 / span 4;}
    .md\:row-start-4 {grid-row-start: 4;}
    .md\:row-end-4 {grid-row-end: 4;}
    .md\:row-span-4 {grid-row: span 4 / span 4;}

    .md\:col-start-5 {grid-column-start: 5;}
    .md\:col-end-5 {grid-column-end: 5;}
    .md\:col-span-5 {grid-column: span 5 / span 5;}
    .md\:row-start-5 {grid-row-start: 5;}
    .md\:row-end-5 {grid-row-end: 5;}
    .md\:row-span-5 {grid-row: span 5 / span 5;}

    .md\:col-start-6 {grid-column-start: 6;}
    .md\:col-end-6 {grid-column-end: 6;}
    .md\:col-span-6 {grid-column: span 6 / span 6;}
    .md\:row-start-6 {grid-row-start: 6;}
    .md\:row-end-6 {grid-row-end: 6;}
    .md\:row-span-6 {grid-row: span 6 / span 6;}

    .sm\:col-span-full {grid-column: 1 / -1;}
}

@media (min-width: 1400px) {
    .lg\:col-start-1 {grid-column-start: 1;}
    .lg\:col-end-1 {grid-column-end: 1;}
    .lg\:col-span-1 {grid-column: span 1 / span 1;}
    .lg\:row-start-1 {grid-row-start: 1;}
    .lg\:row-end-1 {grid-row-end: 1;}
    .lg\:row-span-1 {grid-row: span 1 / span 1;}

    .lg\:col-start-2 {grid-column-start: 2;}
    .lg\:col-end-2 {grid-column-end: 2;}
    .lg\:col-span-2 {grid-column: span 2 / span 2;}
    .lg\:row-start-2 {grid-row-start: 2;}
    .lg\:row-end-2 {grid-row-end: 2;}
    .lg\:row-span-2 {grid-row: span 2 / span 2;}

    .lg\:col-start-3 {grid-column-start: 3;}
    .lg\:col-end-3 {grid-column-end: 3;}
    .lg\:col-span-3 {grid-column: span 3 / span 3;}
    .lg\:row-start-3 {grid-row-start: 3;}
    .lg\:row-end-3 {grid-row-end: 3;}
    .lg\:row-span-3 {grid-row: span 3 / span 3;}

    .lg\:col-start-4 {grid-column-start: 4;}
    .lg\:col-end-4 {grid-column-end: 4;}
    .lg\:col-span-4 {grid-column: span 4 / span 4;}
    .lg\:row-start-4 {grid-row-start: 4;}
    .lg\:row-end-4 {grid-row-end: 4;}
    .lg\:row-span-4 {grid-row: span 4 / span 4;}

    .lg\:col-start-5 {grid-column-start: 5;}
    .lg\:col-end-5 {grid-column-end: 5;}
    .lg\:col-span-5 {grid-column: span 5 / span 5;}
    .lg\:row-start-5 {grid-row-start: 5;}
    .lg\:row-end-5 {grid-row-end: 5;}
    .lg\:row-span-5 {grid-row: span 5 / span 5;}

    .lg\:col-start-6 {grid-column-start: 6;}
    .lg\:col-end-6 {grid-column-end: 6;}
    .lg\:col-span-6 {grid-column: span 6 / span 6;}
    .lg\:row-start-6 {grid-row-start: 6;}
    .lg\:row-end-6 {grid-row-end: 6;}
    .lg\:row-span-6 {grid-row: span 6 / span 6;}

    .lg\:col-span-full {grid-column: 1 / -1;}
}