<CSS>

/* ARRABBIATA GRID */

.wrap_sheets { display: grid; width: 100%; }
                             
                              .wrap_sheets { grid-template-areas: "col1 col2 col3"; }   /* Disposition des fiches en 3 colonnes par défaut*/
@media (max-width: 1000px)  { .wrap_sheets { grid-template-areas: "col1 col2";      } } /* Disposition des fiches en 2 colonnes pour les petits écrans*/
@media (max-width:  700px)  { .wrap_sheets { grid-template-areas: "col1";           } } /* Disposition des fiches en 1 colonne pour les petits écrans et les mobiles */

.wrap_sheet { display: grid; width: 100%; grid-template-areas: "picto   titre   titre" 
                                                               "picto   desc    desc" 
                                                               "bullets bullets bullets" ; } /* Les différents emplacements d'une fiche */

.wrap_sheet p:nth-child(1) { grid-area: picto;   } /* En 1er dans une fiche : le picto         */
.wrap_sheet p:nth-child(2) { grid-area: titre;   } /* En 2nd dans une fiche : le titre         */
.wrap_sheet p:nth-child(3) { grid-area: desc;    } /* En 3em dans une fiche : la description   */
.wrap_sheet p:nth-child(4) { grid-area: bullets; } /* En 4em dans une fiche : les bulletpoints */

.wrap_sheet p:nth-child(4) { display: grid; grid-template-areas: "col1picto col1desc col2picto col2desc"; } /* les bullet points d'une fiche sont alignés sur une grille de deux colonnes */

.wrap_sheet p:nth-child(4):nth-child(1+6n) { grid-area: "col1picto"; } /* Répartition des paires picto/bulletpoint sur les deux colonnes */
.wrap_sheet p:nth-child(4):nth-child(2+6n) { grid-area: "col1desc";  }
.wrap_sheet p:nth-child(4):nth-child(3+6n) { grid-area: "col2picto"; }
.wrap_sheet p:nth-child(4):nth-child(4+6n) { grid-area: "col2desc";  }

/* MISE EN PAGE */

/* Textes & fontes */

.wrap_sheet { border: 1px dashed gray } /* Mettre une bordure pour chaque fiche */

.wrap_sheet p:nth-child(2) { text-transform: uppercase } /* Les tites de chaque fiche en majuscule */

/* tailles et espacements des images */

.wrap_sheet p:nth-child(1) img    { width: 32px    } /* Picto principal de chaque fiche */
.wrap_sheet p:nth-child(4) img    { width: 16px    } /* Pictos des bullets points */
.wrap_sheet p:nth-child(4) .media { margin-top: 0; } /* Enlever la marge par défaut des images, dans la zone des bullet points */

/* Proportions de la grille */

.wrap_sheets               { grid-auto-columns: 1fr; } /* Proportions des colonnes */

.wrap_sheet p:nth-child(4) { grid-template-columns: 20px 1fr 20px 1fr;  } /* Proportions picto / texte des bullet points des fiches */

/* Espacements entre les blocs */

.wrap_sheets               { grid-gap: 10px; } /* Espacements entre les fiches */
.wrap_sheet                { padding:  10px; } /* marges en bordure de chaque ficher */
.wrap_sheet                { grid-gap: 10px; } /* Espacements entre les différents blocs au sein de chaque fiche */

/* CLEANUP */

div.wrap_sheets:before        { content: none }
div.wrap_sheet:before         { content: none }
.wrap_sheet p:nth-child(4) br { display: none }

</CSS>