.summaries {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 250px));
    gap: 24px;
    justify-content: center;
    
}
.summary-page{
    padding-top: 0;
    margin-top: 0;
}



.card.summary{
    background: var(--light);
      display: flex;
    flex-direction: column;
    width: 250px;
    margin:0;   
}
.card.summary1 {
    transform: rotate(-0.5deg);
}


.card-header.summary {
    display: flex;
    justify-content: center;   /* centre le contenu */
    align-items: center;
    position: relative;        /* permet de placer le numéro */
    text-align: center;        /* centre le texte */
    padding-left: 1.7em; /* espace réservé pour le numéro */
     background: linear-gradient(
    135deg,
    hsl(var(--h), 85%, 80%), white,
    hsl(var(--h), 85%, 45%)
  );
}


.card-header.summary .card-index {
    position: absolute;
    left: 0;  
    margin-left: 0.2em;                 /* toujours collé à gauche */
}
.card-index {
  display: inline-block;
  background: white;
  color: var(--base);
  border: 2px solid var(--base);
  border-radius: 50%;
  padding: 0.2em 0.4em;
  font-weight: bold;
  margin-right: 0em;
}
.card-body.summary{
  height: 100%;
}
.summary-tutos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    list-style: none;
    padding: 0 0rem 0.5rem 0rem ;
    margin-top: 0px;
}

.summary-tutos li {
    margin-bottom: 3px;
    padding-bottom: 0.5em;
}

.game-list .btn,
.subtuto .btn,
.summary-tutos .btn {
  
    white-space: normal;
    word-break: break-word;
    background: #f1f1f1;
    background: hsl(60, 100%, 97%);
    overflow-wrap: break-word ;

}
.summaries > .card {
  --shift: 0%;
}

.summaries > .card:nth-child(4n+2) { --shift: 4%; }
.summaries > .card:nth-child(4n+3) { --shift: 8%; }
.summaries > .card:nth-child(4n+4) { --shift: 12%; }

.summaries > .card > .card-body {
  background: hsl(var(--h), 85%, calc(92% - var(--shift)));
}

.summary-page .summaries > .card:nth-child(odd) {
  transform: rotate(-0.6deg);
}

.summary-page .summaries > .card:nth-child(even) {
  transform: rotate(0.6deg);
}
.right-aside .card {
  transform: rotate(0);
}