/* GRILLE 18 COLONNES */

.grid-18 {
  --grid-18-gutter: 14px;
  --grid-18-row-gap: 0;
  display: grid;
  grid-template-columns: repeat(18, minmax(0, 1fr));
  column-gap: var(--grid-18-gutter);
  row-gap: var(--grid-18-row-gap);
}

.grid-18 > * {
  grid-column: 1 / -1;
  min-width: 0;
}

/* Épingle les enfants sur une seule ligne. Requis quand un enfant vise une
   colonne antérieure au précédent (section inversée), le placement auto de
   CSS Grid ne reculant jamais. */
@media screen and (min-width: 768px) {
  .grid-18.single-row > * {
    grid-row: 1;
  }
}


/* --- Toutes tailles --- */

.col18-1 { grid-column: span 1 / span 1; }
.col18-2 { grid-column: span 2 / span 2; }
.col18-3 { grid-column: span 3 / span 3; }
.col18-4 { grid-column: span 4 / span 4; }
.col18-5 { grid-column: span 5 / span 5; }
.col18-6 { grid-column: span 6 / span 6; }
.col18-7 { grid-column: span 7 / span 7; }
.col18-8 { grid-column: span 8 / span 8; }
.col18-9 { grid-column: span 9 / span 9; }
.col18-10 { grid-column: span 10 / span 10; }
.col18-11 { grid-column: span 11 / span 11; }
.col18-12 { grid-column: span 12 / span 12; }
.col18-13 { grid-column: span 13 / span 13; }
.col18-14 { grid-column: span 14 / span 14; }
.col18-15 { grid-column: span 15 / span 15; }
.col18-16 { grid-column: span 16 / span 16; }
.col18-17 { grid-column: span 17 / span 17; }
.col18-18 { grid-column: span 18 / span 18; }

.start18-1 { grid-column-start: 1; }
.start18-2 { grid-column-start: 2; }
.start18-3 { grid-column-start: 3; }
.start18-4 { grid-column-start: 4; }
.start18-5 { grid-column-start: 5; }
.start18-6 { grid-column-start: 6; }
.start18-7 { grid-column-start: 7; }
.start18-8 { grid-column-start: 8; }
.start18-9 { grid-column-start: 9; }
.start18-10 { grid-column-start: 10; }
.start18-11 { grid-column-start: 11; }
.start18-12 { grid-column-start: 12; }
.start18-13 { grid-column-start: 13; }
.start18-14 { grid-column-start: 14; }
.start18-15 { grid-column-start: 15; }
.start18-16 { grid-column-start: 16; }
.start18-17 { grid-column-start: 17; }
.start18-18 { grid-column-start: 18; }


/* --- md : à partir de 768px --- */

@media screen and (min-width: 768px) {

  .col18-md-1 { grid-column: span 1 / span 1; }
  .col18-md-2 { grid-column: span 2 / span 2; }
  .col18-md-3 { grid-column: span 3 / span 3; }
  .col18-md-4 { grid-column: span 4 / span 4; }
  .col18-md-5 { grid-column: span 5 / span 5; }
  .col18-md-6 { grid-column: span 6 / span 6; }
  .col18-md-7 { grid-column: span 7 / span 7; }
  .col18-md-8 { grid-column: span 8 / span 8; }
  .col18-md-9 { grid-column: span 9 / span 9; }
  .col18-md-10 { grid-column: span 10 / span 10; }
  .col18-md-11 { grid-column: span 11 / span 11; }
  .col18-md-12 { grid-column: span 12 / span 12; }
  .col18-md-13 { grid-column: span 13 / span 13; }
  .col18-md-14 { grid-column: span 14 / span 14; }
  .col18-md-15 { grid-column: span 15 / span 15; }
  .col18-md-16 { grid-column: span 16 / span 16; }
  .col18-md-17 { grid-column: span 17 / span 17; }
  .col18-md-18 { grid-column: span 18 / span 18; }

  .start18-md-1 { grid-column-start: 1; }
  .start18-md-2 { grid-column-start: 2; }
  .start18-md-3 { grid-column-start: 3; }
  .start18-md-4 { grid-column-start: 4; }
  .start18-md-5 { grid-column-start: 5; }
  .start18-md-6 { grid-column-start: 6; }
  .start18-md-7 { grid-column-start: 7; }
  .start18-md-8 { grid-column-start: 8; }
  .start18-md-9 { grid-column-start: 9; }
  .start18-md-10 { grid-column-start: 10; }
  .start18-md-11 { grid-column-start: 11; }
  .start18-md-12 { grid-column-start: 12; }
  .start18-md-13 { grid-column-start: 13; }
  .start18-md-14 { grid-column-start: 14; }
  .start18-md-15 { grid-column-start: 15; }
  .start18-md-16 { grid-column-start: 16; }
  .start18-md-17 { grid-column-start: 17; }
  .start18-md-18 { grid-column-start: 18; }

}


/* --- xl : à partir de 1200px --- */

@media screen and (min-width: 1200px) {

  .col18-xl-1 { grid-column: span 1 / span 1; }
  .col18-xl-2 { grid-column: span 2 / span 2; }
  .col18-xl-3 { grid-column: span 3 / span 3; }
  .col18-xl-4 { grid-column: span 4 / span 4; }
  .col18-xl-5 { grid-column: span 5 / span 5; }
  .col18-xl-6 { grid-column: span 6 / span 6; }
  .col18-xl-7 { grid-column: span 7 / span 7; }
  .col18-xl-8 { grid-column: span 8 / span 8; }
  .col18-xl-9 { grid-column: span 9 / span 9; }
  .col18-xl-10 { grid-column: span 10 / span 10; }
  .col18-xl-11 { grid-column: span 11 / span 11; }
  .col18-xl-12 { grid-column: span 12 / span 12; }
  .col18-xl-13 { grid-column: span 13 / span 13; }
  .col18-xl-14 { grid-column: span 14 / span 14; }
  .col18-xl-15 { grid-column: span 15 / span 15; }
  .col18-xl-16 { grid-column: span 16 / span 16; }
  .col18-xl-17 { grid-column: span 17 / span 17; }
  .col18-xl-18 { grid-column: span 18 / span 18; }

  .start18-xl-1 { grid-column-start: 1; }
  .start18-xl-2 { grid-column-start: 2; }
  .start18-xl-3 { grid-column-start: 3; }
  .start18-xl-4 { grid-column-start: 4; }
  .start18-xl-5 { grid-column-start: 5; }
  .start18-xl-6 { grid-column-start: 6; }
  .start18-xl-7 { grid-column-start: 7; }
  .start18-xl-8 { grid-column-start: 8; }
  .start18-xl-9 { grid-column-start: 9; }
  .start18-xl-10 { grid-column-start: 10; }
  .start18-xl-11 { grid-column-start: 11; }
  .start18-xl-12 { grid-column-start: 12; }
  .start18-xl-13 { grid-column-start: 13; }
  .start18-xl-14 { grid-column-start: 14; }
  .start18-xl-15 { grid-column-start: 15; }
  .start18-xl-16 { grid-column-start: 16; }
  .start18-xl-17 { grid-column-start: 17; }
  .start18-xl-18 { grid-column-start: 18; }

}