.grid {
    display: grid;
  }
  
  @media (min-width: 400px) {
    .sm\:grid {
      display: grid;
    }
  }
  
  @media (min-width: 600px) {
    .md\:grid {
      display: grid;
    }
  }
  
  @media (min-width: 950px) {
    .lg\:grid {
      display: grid;
    }
  }
  
  /* grid-template-columns initialisation */
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  
  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  
  .grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  
  .grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  
  /* grid-template-columns au sein des breakpoints */
  @media (min-width: 400px) {
    .sm\:grid-cols-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sm\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .sm\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .sm\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .sm\:grid-cols-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  
  @media (min-width: 600px) {
    .md\:grid-cols-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .md\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .md\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .md\:grid-cols-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  
  @media (min-width: 950px) {
    .lg\:grid-cols-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .lg\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .lg\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .lg\:grid-cols-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  
  /* gap initialisation */
  .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: 400px) {
    .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: 600px) {
    .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: 950px) {
    .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;
  }
  
  .col-span-full {
    grid-column: 1 / -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;
  }
  
  .col-span-full {
    grid-column: 1 / -1;
  }
  
  .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;
  }
  
  .col-span-full {
    grid-column: 1 / -1;
  }
  
  .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;
  }
  
  .col-span-full {
    grid-column: 1 / -1;
  }
  
  .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;
  }
  
  .col-span-full {
    grid-column: 1 / -1;
  }
  
  .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;
  }
  
  .col-span-full {
    grid-column: 1 / -1;
  }
  
  .row-start-6 {
    grid-row-start: 6;
  }
  
  .row-end-6 {
    grid-row-end: 6;
  }
  
  .row-span-6 {
    grid-row: span 6 / span 6;
  }
  
  /* grid-items au sein des breakpoints */
  @media (min-width: 400px) {
    .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\:col-span-full {
      grid-column: 1 / -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\:col-span-full {
      grid-column: 1 / -1;
    }
    .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\:col-span-full {
      grid-column: 1 / -1;
    }
    .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\:col-span-full {
      grid-column: 1 / -1;
    }
    .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\:col-span-full {
      grid-column: 1 / -1;
    }
    .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\:col-span-full {
      grid-column: 1 / -1;
    }
    .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: 600px) {
    .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\:col-span-full {
      grid-column: 1 / -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\:col-span-full {
      grid-column: 1 / -1;
    }
    .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\:col-span-full {
      grid-column: 1 / -1;
    }
    .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\:col-span-full {
      grid-column: 1 / -1;
    }
    .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\:col-span-full {
      grid-column: 1 / -1;
    }
    .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\:col-span-full {
      grid-column: 1 / -1;
    }
    .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;
    }
  }
  
  @media (min-width: 950px) {
    .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\:col-span-full {
      grid-column: 1 / -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\:col-span-full {
      grid-column: 1 / -1;
    }
    .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\:col-span-full {
      grid-column: 1 / -1;
    }
    .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\:col-span-full {
      grid-column: 1 / -1;
    }
    .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\:col-span-full {
      grid-column: 1 / -1;
    }
    .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\:col-span-full {
      grid-column: 1 / -1;
    }
    .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;
    }
  }